Vue-Router 传参

**

1.利用router-link 中的to进行传参

**
在to前面加冒号，进行数据绑定

<router-link :to="{name:'test',params:{user:'username'}}">第二页</router-link>

注意 name 写的是你要传参到哪个组件，我们之前在路由配置中配置过，
记住 :to后面的name要对应路由配置组件的name
例如：

{
      path: '/test',
      name: 'test',
      component: test
}

在上面的代码，我运用了params传参，其实 我们可以通过params与query来传参,(params与path不能同时出现，params一般与name相出现)
params传的参数不会出现在地址栏中

query传的参数会出现在地址栏中

如果我们用params传参，就用
$route.params.(我们之前传的对象的属性)

  <p>{{$route.params.user}}</p>

如果用query传参，也是差不多的
用
$route.query.(我们之前传的对象的属性)

  <p>{{$route.query.user}}</p>

2.我们也可以利用Vue-Router配置进行传参

在src/router/index.js下

{
          path: 'test1/:id/:queryid',
          name: 'test1',
          component: test1
 }

我们通过相同的方式拿参

 <p>{{$route.params.id}}</p>

3 通过 this.$router.push()传参

之前做项目的时候，不是要跳转详情页么。通过点击事件，获取你点击的对象，然后跳转详情页，在详情页中显示你点击的内容，可以看饿了么点餐软件。那时候，我就用了 this.$router.push()来传参。
我开始用了v-for循环，使其有多少数据就显示多少的内容。点击哪个，就把这个对象通过点击事件传入。
例：

@click="enterdetail(item,index)"

在下面的methods，创建方法

enterdetail(item, index) {
        this.$router.push('/detail?id='+JSON.stringify(item.id))   //跳转到detail
      }

我们可以在路径的后面加?id=(点击获取的对象的id)
我们在detail组件中
在data里面写msg属性

 data() {
      return {
        msgid: {}  
      }
    },

在创建的时候，我们把传过来的id赋值给msgid

  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方法