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

<el-button type="primary" @click="handleClick(2)">檢視詳情</el-button>

1、第一種方法：拼接方式，頁面重新整理資料不會丟失

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

對應路由配置：

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

獲取引數如下：

this.$route.params.id

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

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

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

對應路由配置

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

獲取引數：

this.$route.params.id

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

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

對應路由配置：

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

獲取引數：

this.$route.query.id

四、通過params和query中的區別

1、接收方式

query傳參：this.$route.query.id

params傳參：this.$route.params.id

2、路由展現方式

query傳參：/detail?id=1&user=123&identity=1&更多引數

params傳參：/detail/123