vue-router query和params傳參的區別

總結

（1）在通過params傳遞參數時,只能用 name:'/xxx'   不能用  path:'/xxx'  ,否則接收參數時會出現Undefined 

 因爲params只能用name來引入路由，query用path、name都可以引入

（2）一般情況下，通過query方式傳參，刷新頁面後依然可以獲取到刷新前傳過來的參數，而通過params傳遞參數時，刷新後會導致參數丟失出現Undefined

但是我想要params在地址欄上的簡潔，又想要query刷新不丟失參數怎麼辦？

那我們就需要在params的基礎上給路由聲明一下參數，再刷新就不會丟失了

例如：添加“: id”

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

效果：

注意注意注意：這種在路由上聲明參數的寫法，當使用<router-Link  to="/">跳轉時，需要添加參數，否則跳轉後頁面啥也不會顯示！！！

 

1.query方式傳參和接收參數

（1）傳遞參數

this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })

接收參數：

this.$route.query.id

通過query方式傳參會在地址欄上出現參數和參數名，有點類似於Get請求

例：

 

注：傳參是this.$router,接收參數是this.$route

 

this.$router與this.$route

$route爲當前router跳轉對象，裏面可以獲取name、path、query、params等

$router爲VueRouter實例，想要導航到不同URL，則使用$router.push方法

2.params方式傳參和接收參數

傳參

this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  

接收參數

this.$route.params.id

通過params方式傳參會在地址欄上只會有路徑，有點類似於Post請求

例：

 

 

本文是在https://segmentfault.com/a/1190000012735168上理解後，補充修改