使用vue内置组件keep-alive事件动态缓存

在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 动态处理

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false;  // 不缓存
        // to.meta.keepAlive = true;  // 缓存
        next();
    }
};