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

方式獲取，頁面刷新後參數不會消失

綜上所述：

　　在路由中雖然可以傳遞多種類型的參數，但是在頁面刷新後會出現類型錯誤，所以在頁面間傳遞數據時，盡量選擇使用字符串進行傳遞

VUE路由攜帶參數的三種方式