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

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

 

綜上所述：

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