vue-router query和params傳參(接收參數)，$router、$route的區別

連接：https://www.cnblogs.com/zhangruiqi/p/9412539.html

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

傳參: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
  
接收參數:
this.$route.query.id

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

傳參: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  
接收參數:
this.$route.params.id

 

注意:params傳參，push裏面只能是 name:'xxxx',不能是path:'/xxx',由於params只能用name來引入路由，若是這裏寫成了path，接收參數頁面會是undefined！！！

另外，兩者還有點區別，直白的來講query至關於get請求，頁面跳轉的時候，能夠在地址欄看到請求參數，而params至關於post請求，參數不會再地址欄中顯示

注意:傳參是this.$router,接收參數是this.$route,這裏千萬要看清了！！！

3. this.$router 和this.$route有何區別？

在控制檯打印二者能夠很明顯的看出二者的一些區別：

 

• 1.$router爲VueRouter實例，想要導航到不一樣URL，則使用$router.push方法
• 2.$route爲當前router跳轉對象，裏面能夠獲取name、path、query、params等