vue路由传参（query、params传参）

路由的query传参：

1.传递参数

// 跳转并携带query参数，to的字符串写法
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

// 跳转并携带query参数，to的对象写法
<router-link
  :to="{
    path:'/home/message/detail',
    query:{
      id:666,
      title:'你好'
    }
  }"
>
  跳转
</router-link>

2.接收参数

this.$route.query.id
this.$route.query.title

路由的params传参：

1.配置路由，声明接收params参数

//路由配置
{
  name: 'xiangqing'
  path: '/detail/:id/:title', // 使用占位符声明接收params参数
  component: detail
}

2.传递参数

// 跳转并携带params参数，to的字符串写法
<router-link :to="/detail/666/你好">跳转</router-link>

// 跳转并携带params参数，to的对象写法
<router-link
  :to="{
    name:'xiangqing',
    params:{
      id:666,
      title:'你好'
    }
  }"
>
  跳转
</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3.接收参数

this.$route.params.id
this.$route.params.title