vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
更新時間：2020年10月30日 09:40:20 作者：左森
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在App.vue文件中配置
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
在路由中配置
{
path: '/backstage',
component: resolve => require(['@/views/backstage/my'], resolve),
meta: { keepAlive: false }
},
{
path: '/backstage/info',
component: resolve => require(['@/views/backstage/my/info'], resolve),
meta: { keepAlive: false }
},
在頁面中利用 beforeRouteLeave 動態(tài)處理
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // 不緩存
// to.meta.keepAlive = true; // 緩存
next();
}
};
補充知識：vue使用keep-alive后watch事件不銷毀解決方案
使用了keep-alive動態(tài)緩存頁面之后，有一些很難解決的問題：
每個頁面里面設(shè)置的watch監(jiān)聽事件，如果監(jiān)聽了路由的變化或者vuex的變化，在切換頁面的時候watch不會被銷毀，導(dǎo)致下一個頁面重復(fù)觸發(fā)上一個watch監(jiān)聽的對象，重復(fù)請求接口。
解決方案：
定義一個全局 mixin.js
export const mixin = {
data () {
return {
activatedFlag: false
};
},
mounted () {
this.activatedFlag = true;
},
activated () {
this.activatedFlag = true;
},
deactivated () {
this.activatedFlag = false;
}
};
在使用keep-alive緩存的頁面引入mixin
防止在非當(dāng)前頁面重復(fù)觸發(fā)keep-alive緩存頁面的方法
以上這篇vue內(nèi)置組件keep-alive事件動態(tài)緩存實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這幾天，我做了一個vue移動端的小項目，本文主要介紹了Vue移動端apk項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
基于Vue.js的文件選擇與多選對話框組件Dccfile的使用教程
在現(xiàn)代前端開發(fā)中,Vue.js 提供了強大的組件化開發(fā)能力,使得我們可以輕松構(gòu)建復(fù)雜且可復(fù)用的用戶界面,本文將介紹一個基于 Vue.js 的文件選擇與多選對話框組件——Dccfile,并詳細(xì)解析其功能和實現(xiàn)細(xì)節(jié)2025-04-04
vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue 在服務(wù)器端直接修改請求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue3 源碼解讀之 time slicing的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue router返回到指定的路由的場景分析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
vue+relation-graph繪制關(guān)系圖實用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實用組件操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
淺談vue中$event理解和框架中在包含默認(rèn)值外傳參
這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認(rèn)值外傳參，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于element中一個單選框radio時的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考價值,需要的朋友可以參考下2023-09-09