溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何實現vue在App.vue文件中監聽路由變化刷新頁面的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
在路由跳轉時，會出現頁面需要重新刷新一遍才能獲取數據加載頁面，這時添加一個監聽器，如果跳轉到頁面刷新一次。
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return {
isRouterAlive:true,
}
},
//監聽器
watch: {
// 方法1
'$route' (to, from) { //監聽路由是否變化
// console.log(999)
if(to.path == "/"){ //跳轉到哪個頁面
location.reload()
}
},
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
});
},
},
}補充知識：vue監聽路由的改變和監聽頁面的刷新與離開
要分清兩者的區別。
首先是監聽頁面的刷新與離開，此時相當于直接在這個網頁中按了刷新，如果是webapp則是離開這個app而不是切換路由！
如果是用js的特性監測，則是不僅可以頁面的刷新與離開，還能切換路由。注意當keepalive時即使切換了路由也無效。
在script中直接增加監聽器監視beforeunload：
//監視如果頁面離開
created() {
window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
this.finalItemDetail(); // 自己要進行的操作
},
destroyed() {
window.removeEventListener('beforeunload', this.updateHandler)
},然后methods中添加finalItemDetail和updateHandler方法：
updateHandler() {
this.finalItemDetail()
},
finalItemDetail() {
console.log('刷新或關閉');
},如果想監聽某個特定的頁面的離開，比如我現在在/index下，現在去了/index/001下面，就可以在watch中監聽路由的變化，前提是實用vue-router。
如果是簡單的判斷路由變化可以用注釋掉的，直接執行clear方法（自己定義在methods中）
但是注意這個只能監聽自己子路由的變化！
watch: {
// 如果路由有變化，會再次執行clear方法
// "$route": "clear",
$route(to , from){
console.log( to.path, from.path );
this.clear(to.path);
}
},然后我還額外做了個判斷：
clear(path) {
if(path!="/item/item01/evaluate")
console.log("從這個頁面離開了");
this. active=0;
},感謝你能夠認真閱讀完這篇文章，希望小編分享如何實現vue在App.vue文件中監聽路由變化刷新頁面的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
