vue router 傳參獲取不到的解決方式
更新時(shí)間：2019年11月13日 16:36:23 作者：lzcwds
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在當(dāng)前路由中有一個(gè)toArticle方法可以跳轉(zhuǎn)到article頁(yè)面
methods:{
toArticle:function(index) {
this.$router.push({path:'/article',params:this.blogList[index]});
}
}
在article中接受不到params
mounted(){
console.log(this.$route.params)
//這里輸出undifined
}
導(dǎo)致這樣的原因是因?yàn)閜arams需要通過(guò)name來(lái)獲取，這里就要明白query和params的區(qū)別了
query要用path來(lái)引入,接收參數(shù)都是this.$route.query.name。query類似于ajax中g(shù)et傳參，即在瀏覽器地址欄中顯示參數(shù)。
params要用name來(lái)引入，接收參數(shù)都是this.$route.params.name。params則類似于post，即在瀏覽器地址欄中不顯示參數(shù)。
所以以上帶面做下面這樣的修改就可以獲取數(shù)據(jù)：
methods:{
toArticle:function(index) {
this.$router.push({name:'article',params:this.blogList[index]});
}
}
以上這篇vue router 傳參獲取不到的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場(chǎng)景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
這篇文章主要介紹了vue異步請(qǐng)求數(shù)據(jù)重新渲染方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號(hào),而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn)
這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue-router報(bào)錯(cuò):uncaught error during route
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
但隨著vue3版本的到來(lái)，對(duì)typescript的支持度越來(lái)越高，tsx語(yǔ)法也被大部分人越來(lái)越接收，所以很多項(xiàng)目都是搭配 Vue3 + TS 進(jìn)行的，這篇文章主要介紹了一文掌握在Vue3中書寫TSX的方法,需要的朋友可以參考下2023-05-05
vue2項(xiàng)目中如何使用clipboard復(fù)制插件
這篇文章主要介紹了vue2項(xiàng)目中如何使用clipboard復(fù)制插件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問(wèn)題的方式
今天在開(kāi)發(fā)中遇到有點(diǎn)小問(wèn)題，vue+Java后端進(jìn)行調(diào)試時(shí)如何解決跨域問(wèn)題，下面小編給大家分享解決方法，感興趣的朋友一起看看吧2017-10-10