动态路由传参2种方式params与query

1）、params

 传

声明式：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
编程式：
$router.push({ name: 'user', params: { id: '123' }})

 接

 //模板里的写法：
 $route.params.参数名
 
 //脚本里的写法:
 this.$route.params.参数名

动态路由匹配也行。

1）、路由配置：{ path: '/user/:id', component: User }

2）、传参：

//声明式 <router-link to="/user/01001">用户01001的信息</router-link> //编程式 $router.push("/user/01001");

3）、接值：

//模板里的写法： $route.params.参数名

//脚本里的写法: this.$route.params.参数名

2）、query

传：

// 带查询参数，变成 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' }})
注意：如果提供了 path，那么params 会被忽略

接：

 //模板里的写法：
 $route.query.参数名 
 //脚本里的写法:
 this.$route.query.参数名