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大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3動態(tài)組件component不生效問題解決方法
動態(tài)組件component是Vue中非常實用的一個功能,它可以根據(jù)條件動態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動態(tài)組件展示組件時,組件就是不展示顯示空白,所以本文記錄了Vue3動態(tài)組件component不生效問題解決方法,需要的朋友可以參考下2024-08-08
vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
與如何在React項目中應(yīng)用TypeScript類類似在VUE項目中應(yīng)用typescript，我們需要引入一個庫vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹2021-09-09
Element plus實現(xiàn)圖片手動上傳與回顯的過程
近期,發(fā)現(xiàn)點擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-09-09
el-table實現(xiàn)搜索高亮展示并滾動到元素位置的操作代碼
這篇文章主要介紹了el-table實現(xiàn)搜索高亮展示并滾動到元素位置,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因為在此系統(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個報錯是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)動態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09