在路由跳轉(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è)面的刷新與離開(kāi)

要分清兩者的區(qū)別。

首先是監(jiān)聽(tīng)頁(yè)面的刷新與離開(kāi)，此時(shí)相當(dāng)于直接在這個(gè)網(wǎng)頁(yè)中按了刷新，如果是webapp則是離開(kāi)這個(gè)app而不是切換路由！

如果是用js的特性監(jiān)測(cè)，則是不僅可以頁(yè)面的刷新與離開(kāi)，還能切換路由。注意當(dāng)keepalive時(shí)即使切換了路由也無(wú)效。

在script中直接增加監(jiān)聽(tīng)器監(jiān)視beforeunload：

//監(jiān)視如果頁(yè)面離開(kāi) 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è)面的離開(kāi)，比如我現(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è)面離開(kāi)了');this. active=0; },

以上這篇vue在A(yíng)pp.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。