在 Vue.js 开发中，路由传值是一项常见而重要的任务。通过路由传值，我们可以在不同的组件之间传递数据，实现页面间的信息传递和状态管理。Vue 提供了多种灵活的方式来进行路由传值，首先可以根据参数是否显示在请求的 url 中将其分为两类，然后根据传值方式又可以分为 params 传值和 query 传值，最后根据跳转方式又可以分为声名式跳转和编程式跳转。本文将总结并介绍了常用的 Vue 路由传值方法，通过对每种方法的举例说明，帮助开发者更好地理解和应用这些技术。
1.params传参（url上显示参数）
（1）router文件路由配置
{ path: 'settings/:id/:msg', component: Settings, name: 'Settings'}
（2）声明式跳转
① 使用字符串形式传参：
<router-link to="/home/settings/14/params传参">系统设置</router-link>
② 使用对象形式传参：
<router-link :to="{
name:'Settings',
params:{
id:14,
msg:'params传参'
}
}">系统设置</router-link>
注意：这里不能用path必须用name
（3）编程式跳转
① 使用字符串形式传参：
goto() {
this.$router.push('/home/settings/14/params传参');
}
② 使用对象形式传参：
goto() {
this.$router.push({
name: 'Settings',
params: {
id: 14,
msg: 'params传参'
}
});
}
注意：这里同样不能用path必须用name
（4）获取传递的参数值
this.$route.params;
2.params传参（url上不显示参数）
（1）router文件路由配置
{ path: 'settings', component: Settings, name: 'Settings'}
注意：该方法无论是声名式跳转还是编程式跳转都只能使用对象形式的传参，只能使用name不能使用path
（2）声明式跳转
<router-link :to="{
name:'Settings',
params:{
id:14,
msg:'params传参'
}
}">系统设置</router-link>
（3）编程式跳转
goto() {
this.$router.push({
name: 'Settings',
params: {
id: 14,
msg: 'params传参'
}
});
}
（4）获取传递的参数值
this.$route.params;
3.query传参（url上显示参数）
（1）router文件路由配置
{ path: 'settings', component: Settings, name: 'Settings'}
（2）声明式跳转
① 使用字符串形式传参：
<router-link to="/home/settings?id=12&msg=query传参">系统设置</router-link>
② 使用对象形式传参：
<router-link :to="{
// path:'/home/settings',
name:'Settings',
query:{
id:12,
msg:'query传参'
}
}">系统设置</router-link>
注意：这里的name和path可以任选其一使用
（3）编程式跳转
① 使用字符串形式传参：
goto() {
this.$router.push('/home/settings?id=12&msg=query传参');
}
② 使用对象形式传参：
goto() {
this.$router.push({
// path: '/home/settings',
name: 'Settings',
query: {
id: 12,
msg: 'query传参'
}
});
}
注意：这里的name和path可以任选其一使用
（4）获取传递的参数值
this.$route.query;
结论：从以上例子我们可以看出，容易混淆的地方主要就是路由配置中是否要跟上接收的参数，是否能通过 path 进行跳转。最好的记忆方法就是统一使用对象传参方式，在路由配置时给组件命名，统一使用 name 进行跳转。
