VUE路由携带参数的三种方式

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

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

综上所述：

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