vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作
在路由跳轉(zhuǎn)時(shí)，會(huì)出現(xiàn)頁(yè)面需要重新刷新一遍才能獲取數(shù)據(jù)加載頁(yè)面，這時(shí)添加一個(gè)監(jiān)聽(tīng)器，如果跳轉(zhuǎn)到頁(yè)面刷新一次。
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return {
isRouterAlive:true,
}
},
//監(jiān)聽(tīng)器
watch: {
// 方法1
'$route' (to, from) { //監(jiān)聽(tīng)路由是否變化
// console.log(999)
if(to.path == "/"){ //跳轉(zhuǎn)到哪個(gè)頁(yè)面
location.reload()
}
},
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
});
},
},
}
補(bǔ)充知識(shí)：vue監(jiān)聽(tīng)路由的改變和監(jiān)聽(tīng)頁(yè)面的刷新與離開
要分清兩者的區(qū)別。
首先是監(jiān)聽(tīng)頁(yè)面的刷新與離開，此時(shí)相當(dāng)于直接在這個(gè)網(wǎng)頁(yè)中按了刷新，如果是webapp則是離開這個(gè)app而不是切換路由！
如果是用js的特性監(jiān)測(cè)，則是不僅可以頁(yè)面的刷新與離開，還能切換路由。注意當(dāng)keepalive時(shí)即使切換了路由也無(wú)效。
在script中直接增加監(jiān)聽(tīng)器監(jiān)視beforeunload：
//監(jiān)視如果頁(yè)面離開
created() {
window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
this.finalItemDetail(); // 自己要進(jìn)行的操作
},
destroyed() {
window.removeEventListener('beforeunload', this.updateHandler)
},
然后methods中添加finalItemDetail和updateHandler方法：
updateHandler() {
this.finalItemDetail()
},
finalItemDetail() {
console.log('刷新或關(guān)閉');
},
如果想監(jiān)聽(tīng)某個(gè)特定的頁(yè)面的離開，比如我現(xiàn)在在/index下，現(xiàn)在去了/index/001下面，就可以在watch中監(jiān)聽(tīng)路由的變化，前提是實(shí)用vue-router。
如果是簡(jiǎn)單的判斷路由變化可以用注釋掉的，直接執(zhí)行clear方法（自己定義在methods中）
但是注意這個(gè)只能監(jiān)聽(tīng)自己子路由的變化！
watch: {
// 如果路由有變化，會(huì)再次執(zhí)行clear方法
// "$route": "clear",
$route(to , from){
console.log( to.path, from.path );
this.clear(to.path);
}
},
然后我還額外做了個(gè)判斷：
clear(path) {
if(path!="/item/item01/evaluate")
console.log("從這個(gè)頁(yè)面離開了");
this. active=0;
},
以上這篇vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用Split封裝通用拖拽滑動(dòng)分隔面板組件
這篇文章主要介紹了vue使用Split封裝通用拖拽滑動(dòng)分隔面板組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
使用Vant如何實(shí)現(xiàn)數(shù)據(jù)分頁(yè),下拉加載
這篇文章主要介紹了使用Vant實(shí)現(xiàn)數(shù)據(jù)分頁(yè)及下拉加載方式。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題
footer為公用組件，其他頁(yè)面都需要引入。接下來(lái)通過(guò)本文給大家分享vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題,需要的朋友可以參考下2018-05-05
vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來(lái)的界面
這篇文章主要介紹了vue項(xiàng)目如何使用$router.go(-1)返回時(shí)刷新原來(lái)的界面問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)
開發(fā)離不開權(quán)限,不同的用戶登錄,根據(jù)不同的權(quán)限,可以訪問(wèn)不同的管理目錄，本文主要介紹了vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接（pages）
這篇文章主要介紹了vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接（pages）的相關(guān)資料,需要的朋友可以參考下2019-04-04
vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文通過(guò)實(shí)例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07