vue.js做跳转页面的方法

小编给大家分享一下vue.js做跳转页面的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司致力于互联网品牌建设与网络营销，包括网站设计制作、网站制作、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。成都创新互联公司为不同类型的客户提供良好的互联网应用定制及解决方案，成都创新互联公司核心团队10余年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

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

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

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

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

接收参数：

this.$route.params.title

以上是“vue.js做跳转页面的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站栏目：vue.js做跳转页面的方法
分享网址：https://www.cdcxhl.com/article0/ghhcio.html

成都网站建设公司_创新互联，为您提供云服务器、做网站、App开发、全网营销推广、软件开发、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联