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

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

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

路由定义示例：

 {
     name: 'list',
     path: '/list',
     component: List
 }

1. 通过query携带

　　代码示例如下：

 this.$router.push(
     {
         path: '/list',
         query: {
             id: 1
         }
     }
 )

　　携带的参数会在地址栏中展示

　　query可携带任意类型参数，如下：

      me.$router.push({
         path: '/list',
         query: {
           name: '张三',
           info: {
             age: 12,
             sex: 1,
             classList: ['英语', '数学', '历史']
           },
           classList: ['英语', '数学', '历史'],
           isTrue: false,
           nums: 12,
           func: function () {
             console.log('======>>>>>>')
           }
         }
       })

　　获取参数的方式

 this.$route.query

　　该方式的弊端在于，在页面间跳转可正常使用，如info、isTrue、func，但是在进行页面刷新时，所有参数值会转化为字符串，如对象info会转化为字符串'[Object Object]'，布尔值isTrue会转化为'false'，从而导致使用错误

2. 通过params携带参数

　　params也可以携带任何任意类型的数据，在页面间跳转时，参数在地址栏不可见，可通过

 this.$route.params

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

3. 在路由中定义参数

　　方式如下：

 {
       path: '/detail/:id/:info/:isTrue/:classList',
       name: 'detail',
       component: Detail
 }

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

1 this.$route.params

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

综上所述：

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