主要通過兩種方式傳參

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',});

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

this.$router.push({
 name: 'container',});

引數獲取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獲取引數內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！