vue 通过路由在进行页面跳转时，会经常携带参数用于同步页面间的数据

路由中携带参数的方式总结如下：

路由定义示例：

1 {2 name: 'list',3 path: '/list',4 component: List5 }

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: Detail5 }

参数会被全部转化为字符串，在地址栏中可见，可通过

1 this.$route.params

方式获取，页面刷新后参数不会消失

综上所述：

在路由中虽然可以传递多种类型的参数，但是在页面刷新后会出现类型错误，所以在页面间传递数据时，尽量选择使用字符串进行传递