脚本宝典收集整理的这篇文章主要介绍了vue.js怎样做跳转页面，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue.js实现跳转页面的方法：1、 使用标签【】进行跳转；2、使用【this.$router.push()】方法，只有一个参数的时候，代表跳转地址，还可以增加一个参数传值。

【相关文章推荐：vue.js】

vue.js实现跳转页面的方法：

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

<router-link :to="{name: &#39;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

相关免费学习推荐：javascript（视频）

以上就是vue.js怎样做跳转页面的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js怎样做跳转页面全部内容，希望文章能够帮你解决vue.js怎样做跳转页面所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。