vue.js this.$router.push獲取不到params參數(shù)問題
主要通過兩種方式傳參
1.query方式傳參和接受參數(shù)
this.$router.push({ path:’/xxx’ query:{ idname:id }})
接收的方式:this.$route.query.id
2.params方式傳遞參數(shù)
this.$router.push({ name:’路徑名稱’ query:{ idname:id }})
接收的方式:this.$route.params.id
代碼
this.$router.push({ path: ’/container’, params: { url: this.func.url, }, });
在跳轉(zhuǎn)后的頁面中console.log(this.route)發(fā)現(xiàn)params是空的
問題原因:用法錯(cuò)誤,以下為正確用法
this.$router.push({ name: ’container’, params: { url: this.func.url, }, });
要使跳轉(zhuǎn)后的頁面this.$route.params有參數(shù),必須使用name:’container’,而不是path:’/container’,還需要注意name中沒有/
this.$router.push({ name: ’container’, params: { url: this.func.url, }, });
參數(shù)獲取this.$route.params.url
this.$router.push({ path: ’/container’, query: { url: this.func.url, }, });
這種方式會(huì)在跳轉(zhuǎn)的地址上拼接上?url=xxxx獲取方式this.$route.query.url
導(dǎo)致這樣的原因是因?yàn)閜arams需要通過name來獲取,這里就要明白query和params的區(qū)別了
query要用path來引入,接收參數(shù)都是this.$route.query.name。query類似于ajax中g(shù)et傳參,即在瀏覽器地址欄中顯示參數(shù)。 params要用name來引入,接收參數(shù)都是this.$route.params.name。params則類似于post,即在瀏覽器地址欄中不顯示參數(shù)。注意區(qū)別兩種方式,切勿path和name同時(shí)出現(xiàn)
到此這篇關(guān)于vue.js this.$router.push獲取不到params參數(shù)問題的文章就介紹到這了,更多相關(guān)this.$router.push獲取參數(shù)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)2. 如何封裝一個(gè)Ajax函數(shù)3. 多級(jí)聯(lián)動(dòng)下拉選擇框,動(dòng)態(tài)獲取下一級(jí)4. ASP.NET MVC實(shí)現(xiàn)樹形導(dǎo)航菜單5. PHP擴(kuò)展之URL編碼、解碼及解析——URLs6. jsp response.sendRedirect()用法詳解7. Java 接口和抽象類的區(qū)別詳解8. Laravel Eloquent ORM高級(jí)部分解析9. 聊聊python dropna()和notnull()的用法區(qū)別10. 使用maven開發(fā)springboot項(xiàng)目時(shí)pom.xml常用配置(推薦)
