vue.js做跳轉頁面的方法

小編給大家分享一下vue.js做跳轉頁面的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue.js實現跳轉頁面的方法：1、  使用標簽【】進行跳轉；2、使用【this.$router.push()】方法，只有一個參數的時候，代表跳轉地址，還可以增加一個參數傳值。

vue.js實現跳轉頁面的方法：

點擊底部書架跳轉到對應的頁面

<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
             :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
              <span class="tabNav-txt">書 架</span>
</router-link>

'name': 'bookshelf'表示要跳轉的Vue組件名稱，名稱是在router文件下的index.vue中進行設置。

{
     path: '/bookshelf',
     name: 'bookshelf',
     component: Bookshelf
   },

params :{entityId: this.entityId}里面是要傳遞過去的參數。

在bookshelf組件接收參數

this.bookshelfId = this.$route.params.entityId;

除了使用標簽<router-link>進行跳轉，還可以使用下面的方法

<a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 頁</span>
</a>
toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
}

同樣可以跳轉頁面，this.$router.push()方法只有一個參數的時候，代表跳轉地址，還可以增加一個參數傳值。

寫法：

this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

接收參數：

this.$route.params.title

以上是“vue.js做跳轉頁面的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！