如何點選底部書架跳轉到對應的頁面

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

需要注意path不能和params一起使用，否則params將無效。需要用name來指定頁面。

或者通過path和query傳遞引數

this.$route.push({path: '/book', query: {'id', this.id}})

頁面接收引數使用 this.$route.query.id