vue 路由跳转和传参详解

一:路由跳转

1、router-link跳转

1)<router-link to="/official"></router-link>
2)<router-link to="{name:'Myofficial'}"></router-link>

在这里插入图片描述

2、js的push方法

1)this.$router.push('/personCenter')
2)this.$router.push({name:'PersonCenter'})

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200116111848887.png

二:路由跳转传参

1、显示传参

针对于需要展示的参数,便于区分,需要展示给用户看的
方式一:需要配置路由的一种,如图效果展示
在这里插入图片描述

  • router-link法

    <router-link to="/official/edit/2"></router-link>
    在这里插入图片描述

  • js 的push方法
    this.$router.push(/official/edit/${this.page})
    在这里插入图片描述
    注意:以上两种路由都需要提前配置,如图所示的index.js
    在这里插入图片描述

接受方:console.log(this.$route)
在这里插入图片描述

方式二:不需要额外配置路由的一种,如图效果展示
展示如下:
在这里插入图片描述

this.$router.push({name:'EditProject',query:{page:this.page}}) //出了用name也可以用path 指定路由匹配,当然也可以都写
在这里插入图片描述
或者this.$router.push(official/edit?id=${row.id}) (和上面的方式效果一样)
在这里插入图片描述

这个是路由的书写,如下图所示在这里插入图片描述
接收方:console.log(this.$route) 用query 和直接在url尾部加都是这样的输出

在这里插入图片描述

2、隐式传参(params)

针对于页面挑战的时候,不需要展示给客户看到的数据的传递
this.$router.push({name:'MyProject',params:{species:this.species}})
在这里插入图片描述
接收方 console.log(this.$route)
在这里插入图片描述

发布了10 篇原创文章 · 获赞 0 · 访问量 138
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览