vue 通过路由在进行页面跳转时，会经常携带参数用于同步页面间的数据
路由中携带参数的方式总结如下：
路由定义示例：
1 { 2 name: ‘list‘, 3 path: ‘/list‘, 4 component: List 5 }
1. 通过query携带
代码示例如下：
1 this.$router.push( 2 { 3 path: ‘/list‘, 4 query: { 5 id: 1 6 } 7 } 8 )
携带的参数会在地址栏中展示
query可携带任意类型参数，如下：
1 me.$router.push({ 2 path: ‘/list‘, 3 query: { 4 name: ‘张三‘, 5 info: { 6 age: 12, 7 sex: 1, 8 classList: [‘英语‘, ‘数学‘, ‘历史‘] 9 }, 10 classList: [‘英语‘, ‘数学‘, ‘历史‘], 11 isTrue: false, 12 nums: 12, 13 func: function () { 14 console.log(‘======>>>>>>‘) 15 } 16 } 17 })
获取参数的方式
1 this.$route.query
该方式的弊端在于，在页面间跳转可正常使用，如info、isTrue、func，但是在进行页面刷新时，所有参数值会转化为字符串，如对象info会转化为字符串‘[Object Object]‘，布尔值isTrue会转化为‘false‘，从而导致使用错误
2. 通过params携带参数
params也可以携带任何任意类型的数据，在页面间跳转时，参数在地址栏不可见，可通过
1 this.$route.params
方式获取，页面刷新后参数消失
3. 在路由中定义参数
方式如下：
1 { 2 path: ‘/detail/:id/:info/:isTrue/:classList‘, 3 name: ‘detail‘, 4 component: Detail 5 }
参数会被全部转化为字符串，在地址栏中可见，可通过
1 this.$route.params
方式获取，页面刷新后参数不会消失
综上所述：
在路由中虽然可以传递多种类型的参数，但是在页面刷新后会出现类型错误，所以在页面间传递数据时，尽量选择使用字符串进行传递
原文：https://www.cnblogs.com/jacky-jyk/p/10589542.html