專案中很多情況下都需要進行路由之間的傳值，想過很多種方式

sessionstorage/localstorage/cookie 進行離線快取儲存也可以，用vuex也可以，不過有些大材小用吧，不管怎麼說因場景而異

下面我來說下vue自帶的路由傳參的三種基本方式

先有如下場景 點選當前頁的某個按鈕跳轉到另外一個頁面去，並將某個值帶過去

<div class="examine" @click="insurance(2)">檢視詳情</div>

第一種方法 頁面重新整理資料不會丟失

methods：{
  insurance(id) {
       //直接呼叫$router.push 實現攜帶引數的跳轉
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

需要對應路由配置如下：

{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

可以看出需要在path中新增/:id來對應 $router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值
另外頁面獲取引數如下

this.$route.params.id

第二種方法 頁面重新整理資料會丟失

通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。

methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

對應路由配置: 注意這裡不能使用:/id來傳遞引數了，因為元件中，已經使用params來攜帶引數了。

 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

子元件中: 這樣來獲取引數

this.$route.params.id

第三種方法
使用path來匹配路由，然後通過query來傳遞引數
這種情況下 query傳遞的引數會顯示在url後面?id=？

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

對應路由配置：

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

對應子元件: 這樣來獲取引數

this.$route.query.id

特別注意
元件中 獲取引數的時候是route.params而不是router，這點很重要！！！

原文連結：https://www.jianshu.com/p/d276dcde6656