vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例

更新時(shí)間：2020年10月30日 09:40:20 作者：左森

這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動(dòng)態(tài)緩存實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

在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 動(dòng)態(tài)處理

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 設(shè)置下一個(gè)路由的 meta
    to.meta.keepAlive = false; // 不緩存
    // to.meta.keepAlive = true; // 緩存
    next();
  }
};

補(bǔ)充知識(shí)：vue使用keep-alive后watch事件不銷毀解決方案

使用了keep-alive動(dòng)態(tài)緩存頁面之后，有一些很難解決的問題：

每個(gè)頁面里面設(shè)置的watch監(jiān)聽事件，如果監(jiān)聽了路由的變化或者vuex的變化，在切換頁面的時(shí)候watch不會(huì)被銷毀，導(dǎo)致下一個(gè)頁面重復(fù)觸發(fā)上一個(gè)watch監(jiān)聽的對(duì)象，重復(fù)請(qǐng)求接口。

解決方案：

定義一個(gè)全局 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事件動(dòng)態(tài)緩存實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談使用Vue完成移動(dòng)端apk項(xiàng)目
這幾天，我做了一個(gè)vue移動(dòng)端的小項(xiàng)目，本文主要介紹了Vue移動(dòng)端apk項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
基于Vue.js的文件選擇與多選對(duì)話框組件Dccfile的使用教程
在現(xiàn)代前端開發(fā)中,Vue.js 提供了強(qiáng)大的組件化開發(fā)能力,使得我們可以輕松構(gòu)建復(fù)雜且可復(fù)用的用戶界面,本文將介紹一個(gè)基于 Vue.js 的文件選擇與多選對(duì)話框組件——Dccfile,并詳細(xì)解析其功能和實(shí)現(xiàn)細(xì)節(jié)
2025-04-04
vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁面
這篇文章主要介紹了vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue 在服務(wù)器端直接修改請(qǐng)求的接口地址
這篇文章主要介紹了vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue3 源碼解讀之 time slicing的使用方法
這篇文章主要介紹了vue3 源碼解讀之 time slicing的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue router返回到指定的路由的場(chǎng)景分析
這篇文章主要介紹了vue router返回到指定的路由的場(chǎng)景分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
淺談vue中$event理解和框架中在包含默認(rèn)值外傳參
這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認(rèn)值外傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解
這篇文章主要給大家介紹了關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下
2023-09-09