vue-router query和params傳參(接收引數),$router、$route的區別
阿新 • • 發佈:2018-12-23
連結: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等