在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'],

在頁面中利用 beforeRouteLeave 動態處理

export default {
  data() {
    return {};
  },methods: {},beforeRouteLeave(to,from,next) {
    // 設定下一個路由的 meta
    to.meta.keepAlive = false; // 不快取
    // to.meta.keepAlive = true; // 快取
    next();
  }
};

補充知識：vue使用keep-alive後watch事件不銷燬解決方案

使用了keep-alive動態快取頁面之後，有一些很難解決的問題：

每個頁面裡面設定的watch監聽事件，如果監聽了路由的變化或者vuex的變化，在切換頁面的時候watch不會被銷燬，導致下一個頁面重複觸發上一個watch監聽的物件，重複請求介面。

解決方案：

定義一個全域性 mixin.js

export const mixin = {
 data () {
  return {
   activatedFlag: false
  };
 },mounted () {
  this.activatedFlag = true;
 },activated () {
  this.activatedFlag = true;
 },deactivated () {
  this.activatedFlag = false;
 }
};

在使用keep-alive快取的頁面引入mixin

防止在非當前頁面重複觸發keep-alive快取頁面的方法

以上這篇vue內建元件keep-alive事件動態快取例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。