Vue-Router传参

一、利用router-link中的to传参

在to前面加冒号，进行数据绑定
router-link :to="{name:‘test’,params:{user:‘username’}}"，这里的name写的是你要传参到哪个组件，是之前在路由配置里写过的，而to后面的name要对应路由配置组件的name；
{
path: ‘/test’,
name: ‘test’,
component: test
}
上面的代码是我们在路由配置时一般代码的书写格式，这是用了params传参，还一个传参方式就是query，这两者的区别就在于前者传的参不会在地址上显示，如下：localhost：8080/#/test；query就会显示参数：localhost：8080/#/test?user=username
这两个获取数据的方式还是一样的，都是{{$route.params.user}}，只是方法不一样，写法一样的。

二、利用Vue-Router配置进行传参

这是在src/router/index.js下写的代码和上面不同是在路劲后面跟上参数，
{
path: ‘test1/:id/:queryid’,
name: ‘test1’,
component: test1
}
，获取参数的方式还是和第一种一样的。

三、通过 this.$router.push()传参

我们传参是为了什么，就是在跳转路由的时候为了让另一个页面同样能拿到一样的数据，这个就是在跳转详情的时候用了，因为不同的参数有不同的数据，而且是指定其中的一个数据，一般是通过点击事件传参，所以在点击的时候就需要把参数带过去：@click=“enterdetail(item,index)”，item是数据，而index就是指的是哪条数据，传过去具体的值。接下去就是给上面写的enterdetail方法写具体的事件，enterdetail(item, index) {
this.$router.push(’/detail?id=’+JSON.stringify(item.id))
}

写完这段代码就是要到你的detail组件，在data里面写一段代码，
data() {
return {
msgid: {}
}
},
接下来就是要把传过来的参接收，变成detail组件自己的数据：
created () {
this.msgid = JSON.parse(this.$route.query.id)
}

**

this.route与this.router的区别

**
$route

$router

this.$route:当前router跳转对象，里面可以获取name、path、query、params等;this.$router：router为Vue-Router实例，想到导航到不同url，则使用router.push方法。