vue跳轉(zhuǎn)同一個(gè)組件,參數(shù)不同,頁面接收值只接收一次的解決方法
作為vue的初用者，你可能會(huì)像我一樣遇到一個(gè)問題，對(duì)跳轉(zhuǎn)組件是，我們想通過參數(shù)不同，調(diào)用不同的方法。
例如：
app.vue
<ul>
<li class="navList" v-for="index in goods" :key="index.name">
<router-link :to="{path:index.link,query:{type:index.name}}" >
{{index.name}}
</router-link>
</li>
</ul>
app…vue中的data數(shù)據(jù)：
goods:[
{name:'女裝',link:'goods'},
{name:'男裝',link:'goods'},
]
在goods.vue中接受數(shù)據(jù)
mounted(){
this.stri=this.$route.query.type;
}
當(dāng)我循環(huán)輸出這些鏈接，每個(gè)鏈接的地址都是一樣的。參數(shù)不一樣，當(dāng)我們點(diǎn)擊我們的按鈕時(shí)
我們只會(huì)看到導(dǎo)航欄中的參數(shù)在變化，然而我們頁面中的數(shù)并沒有變化。這是為什么呢？
相信很多朋友也已經(jīng)知道了，這是因?yàn)樘D(zhuǎn)同一個(gè)組件，這個(gè)組件在第一次，會(huì)執(zhí)行組件的生命周期中的步驟，但是第二次再跳轉(zhuǎn)該組件的時(shí)候，組件會(huì)被重用，所以不會(huì)再執(zhí)行生命周期中的某些過程，同樣mount也不會(huì)執(zhí)行，也就是說，不會(huì)執(zhí)行第二次賦值。
那我們應(yīng)該怎么獲取值呢？
這里有一個(gè)方法：
goods.vue
beforeRouteUpdate(to,from,next){
this.stri=to.query.type;
next();
}
beforeRouteUpdate的作用就是監(jiān)聽在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
這就是我們所需要的東西了。路由的地址變化了，組件也被復(fù)用了。
同樣的我能還可以使用另一種監(jiān)聽路由變化的方法：
watch:{
'$route'(to,from){
this.stri=to.query.type
}
},
這個(gè)方法，和上面的beforeRouteUpdate起到一樣的效果。
如果你遇到的問題，和我所遇到的一樣，那么恭喜你，你也解決了這個(gè)問題。
以上這篇vue跳轉(zhuǎn)同一個(gè)組件,參數(shù)不同,頁面接收值只接收一次的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE UPLOAD 通過ACTION返回上傳結(jié)果操作
這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結(jié)果操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
setup是Vue3中引入的一個(gè)新的組件選項(xiàng)，是Vue3中函數(shù)式組件的核心部分，它提供了一種新的方式來編寫組件邏輯，下面就來和大家講講它的使用和原理2023-08-08
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實(shí)例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-06-06
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
基于Vue方法實(shí)現(xiàn)簡單計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡單計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Pinia?是?Vue.js?的輕量級(jí)狀態(tài)管理庫,最近很受歡迎,它使用?Vue?3?中的新反應(yīng)系統(tǒng)來構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2023-10-10
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
appear 是一個(gè)在元素默認(rèn)被顯示的情況下 調(diào)用進(jìn)入動(dòng)畫效果,使得元素在這種初次渲染情況下 執(zhí)行進(jìn)入動(dòng)畫的屬性,最近在學(xué)習(xí)vue3的動(dòng)畫時(shí)遇到appear無法生效的問題,本文給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue點(diǎn)擊頁面空白處實(shí)現(xiàn)保存功能
這篇文章主要介紹了vue點(diǎn)擊頁面空白處實(shí)現(xiàn)保存功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11