Vue实现页面跳转

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YISHENGYOUNI95/article/details/80719512

如何点击底部书架跳转到对应的页面

<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