vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作
在路由跳轉(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在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題的解決方法
大家應(yīng)該都知道可以通過(guò)vue-router官方提供的一個(gè)api-->addRoutes可以實(shí)現(xiàn)路由添加的功能,事實(shí)上就也就實(shí)現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題的解決方法,需要的朋友可以參考下2021-08-08
vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
教你如何開(kāi)發(fā)Vite3插件構(gòu)建Electron開(kāi)發(fā)環(huán)境
這篇文章主要介紹了如何開(kāi)發(fā)Vite3插件構(gòu)建Electron開(kāi)發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動(dòng),感興趣的朋友可以參考下實(shí)現(xiàn)代碼2024-05-05
本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問(wèn)題解決
這篇文章主要介紹了Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問(wèn)題解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航收縮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue是可以自定義指令的,最近學(xué)習(xí)過(guò)程中遇見(jiàn)了一個(gè)需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實(shí)現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08