在路由跳轉(zhuǎn)時(shí)，會(huì)出現(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ǔ)充知識(shí)：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: { // 如果路由有變化，會(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è)頁面離開了');this. active=0; },

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