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

轉載：https://segmentfault.com/a/1190000012735168?utm_source=tag-newest

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

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

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

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

在控制台打印兩者可以很明顯的看出兩者的一些區別：

• 1.$router為VueRouter實例，想要導航到不同URL，則使用$router.push方法
• 2.$route為當前router跳轉對象，里面可以獲取name、path、query、params等

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

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

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