主要通過兩種方式傳參

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

this.$router.push({ path:’/xxx’ query:{ idname:id }})

接收的方式：this.$route.query.id

2.params方式傳遞參數

this.$router.push({ name:’路徑名稱’ query:{ idname:id }})

接收的方式：this.$route.params.id

代碼

this.$router.push({ path: ’/container’, params: { url: this.func.url, }, });

在跳轉后的頁面中console.log(this.route)發現params是空的

問題原因:用法錯誤,以下為正確用法

this.$router.push({ name: ’container’, params: { url: this.func.url, }, });

要使跳轉后的頁面this.$route.params有參數，必須使用name:’container’，而不是path:’/container’，還需要注意name中沒有/

this.$router.push({ name: ’container’, params: { url: this.func.url, }, });

參數獲取this.$route.params.url

this.$router.push({ path: ’/container’, query: { url: this.func.url, }, });

這種方式會在跳轉的地址上拼接上?url=xxxx獲取方式this.$route.query.url

導致這樣的原因是因為params需要通過name來獲取，這里就要明白query和params的區別了

query要用path來引入,接收參數都是this.$route.query.name。query類似于ajax中get傳參，即在瀏覽器地址欄中顯示參數。 params要用name來引入，接收參數都是this.$route.params.name。params則類似于post，即在瀏覽器地址欄中不顯示參數。

注意區別兩種方式，切勿path和name同時出現

到此這篇關于vue.js this.$router.push獲取不到params參數問題的文章就介紹到這了,更多相關this.$router.push獲取參數內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！