vue 通过router传参

1、通过query传参

this.$router.push({
      path: '/detail',
      query: {
         id: id
       }
 })
 
 // 对应路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
 }
 
 // 子组件获取参数:
 this.$route.query.id

2、通过params方式传参
params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了

this.$router.push({
    name: 'Detail',
    params: {
       id: id
    }
 })
 
 // 对应路由配置：
 {
     path: '/detail',
     name: 'Detail',
     component: Detail
  }
  
 // 子组件获取参数:
 this.$route.params.id

// 直接在路由地址后面拼接参数
this.$router.push({
      path: `/detail/${id}`,
 })
 
// 路由配置
{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
 }
 
//获取参数
this.$route.params.id

// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后，id依然可以获取，而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

总结：

1. query传参：
   name和path都行，
   url会带上参数，
   通过this.$route.query获取
2. params传参：
   只能name
   url不会带上参数，刷新就没有了
   通过this.$route.params获取