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