目标

根据当前路由路径判断是否启用<keep-alive>进行缓存

实现思路

• 使用动态渲染组件<component :is="currentComponent">替代<router-view>
• 使用 this.$route.matched[0].components.default为 currentComponent赋值
• 在router定义路由时设置是否进行缓存属性，并通过$route.meta.keepAlive判断是否启用keep-alive

代码示例

1. 路由配置（router/index.js）

let routes = [{
    path: "/",
    redirect: '/riskUserList'
  },
  {
    path: "/riskUserList",
    name:"riskUserList",
    component: () => import('@/views/risk/riskUserList'),
    meta: {
      title: '人员列表',
      keepAlive:true
    }
  },
  {
    path: "/riskUserDetail",
    name:"riskUserDetail",
    component: () => import('@/views/risk/riskUserDetail'),
    meta: {
      title: '人员明细',
      keepAlive:false
    }
  }
]
export default routes

2.app.vue

<template>
      <div id="app">
            <keep-alive>
                <component :is="currentComponent" v-if="$route.meta.keepAlive"/>
            </keep-alive>
            <component :is="currentComponent" v-if="!$route.meta.keepAlive"/>
        </div>
</template>
export default {
    name: 'App',
    data() {
        return {
            zh_CN,
        }
    },
    computed: {
        currentComponent() {
            return this.$route.matched[0]?this.$route.matched[0].components.default:this.$route.name
        },
    }
}

方案二

<template>
    <a-config-provider :locale="zh_CN">
        <div id="app">
            <keep-alive>
                <component :is="currentComponent" v-if="keepAliveList.includes(currentComponent.name)"/>
            </keep-alive>
            <component :is="currentComponent" v-if="!keepAliveList.includes(currentComponent.name)"/>
        </div>
    </a-config-provider>
</template>

<script>
export default {
    name: 'App',
    components: {},
    data() {
        return {
            keepAliveList: ['riskUserList']
        }
    },
    computed: {
        currentComponent() {
            return this.$route.matched[0]?this.$route.matched[0].components.default:{}
        }
    },
    created(){}
}

方案二遇到问题及解决方案

• 问题：this.$route.matched[0].components.default取不到值
• 原因：组件导入时使用了异步导入所致

//异步导入示例
 {
    path: "/UserList",
    name:"UserList",
    //在使用 () => import(...) 动态导入时，this.$route.matched[0].components.default 是 undefined，因为这个值只有在组件被实际渲染时才会解析加载。
    component: () => import('@/views/risk/riskUserList'),
  },

//同步导入示例
import userList from '@/views/risk/riskUserList
 {
    path: "/UserList",
    name:"UserList",
    component: userList
  },

• 解决方案：在meta中加入组件名称，并在app.vue中访问this.$route.meta.componentName替代this.$route.matched[0].components.default

 {
    path: "/UserList",
    name:"UserList",
    component: () => import('@/views/risk/riskUserList'),
    meta:{
        componentName:'UserList'
  },