專案中很多情況下都需要進行路由之間的傳值，可以使用sessionstorage/localstorage/cookie 進行離線快取儲存也可以，用vuex也可以，如果只是簡單的傳值可以使用vue自帶的路由傳參方法

參考官方文件：https://router.vuejs.org/zh/guide/essentials/passing-props.html

想要實現點選當前頁的某個按鈕或連結跳轉到另外一個頁面去，並將某個引數帶過去

<div @click="insurance(123)">我要傳參</div>

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

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

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

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

目標頁面獲取引數方法：

this.$route.params.id

第二種方法 頁面重新整理資料會丟失 類似post請求

通過路由屬性中的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

第三種方法 query傳遞的引數會顯示在url後面以【?id=？】的形式，類似get請求

使用path來匹配路由，然後通過query來傳遞引數

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

對應路由配置：

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

目標頁面獲取引數方法：

 this.$route.query.id