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