vue.js怎麼做跳頁

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

【相關文章推薦：vue.js】

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

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

<router-link :to="{name: &#39;bookshelf&#39;, params: { entityId: this.entityId } }"
             :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,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;

除了使用標籤

<a @click="toIndex" :class="{&#39;flex-item-1&#39;:&#39;flex-item-1&#39;,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

相關免費學習推薦：

javascript（影片）

以上是vue.js怎麼做跳頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！