vue.js做跳轉(zhuǎn)頁面的方法

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

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

vue.js實(shí)現(xiàn)跳轉(zhuǎn)頁面的方法：

點(diǎn)擊底部書架跳轉(zhuǎn)到對應(yīng)的頁面

<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'表示要跳轉(zhuǎn)的Vue組件名稱，名稱是在router文件下的index.vue中進(jìn)行設(shè)置。

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

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

在bookshelf組件接收參數(shù)

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

除了使用標(biāo)簽<router-link>進(jìn)行跳轉(zhuǎn)，還可以使用下面的方法

<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"));
}

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

寫法：

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

接收參數(shù)：

this.$route.params.title

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