vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
在路由跳轉(zhuǎn)時，會出現(xiàn)頁面需要重新刷新一遍才能獲取數(shù)據(jù)加載頁面，這時添加一個監(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)到哪個頁面
location.reload()
}
},
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true
});
},
},
}
補充知識：vue監(jiān)聽路由的改變和監(jiān)聽頁面的刷新與離開
要分清兩者的區(qū)別。
首先是監(jiān)聽頁面的刷新與離開，此時相當于直接在這個網(wǎng)頁中按了刷新，如果是webapp則是離開這個app而不是切換路由！
如果是用js的特性監(jiān)測，則是不僅可以頁面的刷新與離開，還能切換路由。注意當keepalive時即使切換了路由也無效。
在script中直接增加監(jiān)聽器監(jiān)視beforeunload：
//監(jiān)視如果頁面離開
created() {
window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
this.finalItemDetail(); // 自己要進行的操作
},
destroyed() {
window.removeEventListener('beforeunload', this.updateHandler)
},
然后methods中添加finalItemDetail和updateHandler方法：
updateHandler() {
this.finalItemDetail()
},
finalItemDetail() {
console.log('刷新或關(guān)閉');
},
如果想監(jiān)聽某個特定的頁面的離開，比如我現(xiàn)在在/index下，現(xiàn)在去了/index/001下面，就可以在watch中監(jiān)聽路由的變化，前提是實用vue-router。
如果是簡單的判斷路由變化可以用注釋掉的，直接執(zhí)行clear方法（自己定義在methods中）
但是注意這個只能監(jiān)聽自己子路由的變化！
watch: {
// 如果路由有變化，會再次執(zhí)行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文件中監(jiān)聽路由變化刷新頁面操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目中使用addRoutes出現(xiàn)問題的解決方法
大家應該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實現(xiàn)路由添加的功能,事實上就也就實現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08
vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue點擊項目唯一id生成器nanoid的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue如何實現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue+elementUI實現(xiàn)點擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實現(xiàn)點擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動,感興趣的朋友可以參考下實現(xiàn)代碼2024-05-05
本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)導航收縮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue是可以自定義指令的,最近學習過程中遇見了一個需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08