更新0.1.1版本

src/layout/components/Main/index.ts

@@ -0,0 +1,3 @@
+import MainView from './index.vue'
+
+export { MainView }

src/layout/components/Main/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <transition name="zoom-fade" mode="out-in" appear>
+        <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
+          <component :is="Component" :key="route.fullPath"/>
+        </keep-alive>
+        <component v-else :is="Component" :key="route.fullPath"/>
+      </transition>
+    </template>
+  </RouterView>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
+
+export default defineComponent({
+  name: 'MainView',
+  components: {},
+  props: {
+    notNeedKey: {
+      type: Boolean,
+      default: false
+    },
+    animate: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const asyncRouteStore = useAsyncRouteStore()
+    // 需要缓存的路由组件
+    const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents)
+    return {
+      keepAliveComponents
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+</style>