fix: 📌 去掉多余得包，目录名字修改

package.json

@@ -24,7 +24,6 @@
     "codemirror": "^5.65.9",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.4",
-    "default-passive-events": "^2.0.0",
     "echarts": "^5.3.1",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.2.21",
@@ -38,7 +37,6 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.21",
-    "pinia-persistedstate-plugin": "^0.1.0",
     "pinia-plugin-persistedstate": "^2.1.1",
     "print-js": "^1.6.0",
     "sass": "^1.54.0",

src/hooks/useWrapComponents.ts

@@ -0,0 +1,23 @@
+// 自定义name的壳的集合
+import {h} from "vue";
+
+const wrapperMap = new Map()
+
+export const useWrapComponents = (Component,route)=>{
+    let wrapper
+    if (Component) {
+        const wrapperName = route.name
+        if (wrapperMap.has(wrapperName)) {
+            wrapper = wrapperMap.get(wrapperName)
+        } else {
+            wrapper = {
+                name: wrapperName,
+                render() {
+                    return h("div", {className: "app-main-inner"}, Component)
+                },
+            }
+            wrapperMap.set(wrapperName, wrapper)
+        }
+        return h(wrapper)
+    }
+}

src/layout/components/Main/index.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="app-main" >
-    <div class="app-main-inner">
-      <router-view v-slot="{ Component, route }">
-        <transition name="fade-slide" mode="out-in" appear>
-          <component :is="Component" :key="route.path" />
-        </transition>
-      </router-view>
-    </div>
+    <router-view v-slot="{ Component, route }">
+      <transition name="fade-slide" mode="out-in" appear>
+        <keep-alive :include="cacheRoutes" v-if="isReload">
+          <component :is="useWrapComponents(Component,route)" :key="route.path" />
+        </keep-alive>
+      </transition>
+    </router-view>
   </div>
 </template>
 
 <script lang="ts" setup>
+  import {useWrapComponents} from '@/hooks/useWrapComponents'
   import { computed, ref } from 'vue'
   import {useSettingStore} from "@/store/modules/setting"
   import {usePermissionStore} from "@/store/modules/permission"
   const SettingStore = useSettingStore()
   const PermissionStore = usePermissionStore()
-
-  const cacheRoutes = computed(() =>PermissionStore.getCacheRoutes())
+  const cacheRoutes = computed(() =>PermissionStore.keepAliveRoutes)
   const isReload = computed(() => SettingStore.isReload)
-
 </script>
 
 <style lang="scss" scoped>
@@ -27,7 +26,6 @@
     flex: 1;
     display: flex;
     overflow-x: hidden;
-
     width: 100%;
     box-sizing: border-box;
     .app-main-inner{

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './routers'
 import pinia from "./store";
 
 // 权限路由

src/permission.ts

@@ -1,4 +1,4 @@
-import router from '@/router/index'
+import router from '@/routers/index'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import {useUserStore} from "@/store/modules/user"
@@ -17,9 +17,12 @@ router.beforeEach(async(to, from, next) => {
   if(typeof(to.meta.title) === 'string'){
       document.title = to.meta.title ||'vue-admin-perfect'
   }
+
   const UserStore = useUserStore();
   // 确定用户是否已登录过，存在Token
   const hasToken = UserStore.token
+
+
   if (hasToken) {
     if (to.path === '/login') {
       // 如果已登录，请重定向到主页

src/routers/index.ts

@@ -14,7 +14,7 @@ import echartsRouter from './modules/echarts'
 import chatRouter from './modules/chat'
 import othersRouter from './modules/other'
 import externalLink from './modules/externalLink'
-import formRouter from './modules/from'
+import formRouter from './modules/form'
 import functionPageRouter from './modules/functionPage'
 
 

src/routers/modules/form.ts

@@ -17,19 +17,19 @@ const formRouter = [{
         {
             path: 'validateForm',
             component: () => import('@/views/form/validateForm/index.vue'),
-            name: 'validate-form',
+            name: 'validateForm',
             meta: { title: '校验 Form', keepAlive: true , icon: 'MenuIcon'}
         },
         {
             path: 'advancedForm',
             component: () => import('@/views/form/advancedForm/index.vue'),
-            name: 'advanced-form',
-            meta: { title: '收缩 Form', keepAlive: true , icon: 'MenuIcon'}
+            name: 'advancedForm',
+            meta: { title: '收缩 Form',  icon: 'MenuIcon'}
         },
         {
             path: 'appendForm',
             component: () => import('@/views/form/appendForm/index.vue'),
-            name: 'append-form',
+            name: 'appendForm',
             meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
         },
     ]

src/store/modules/permission.ts

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import { asyncRoutes, constantRoutes,routerArray,notFoundRouter } from '@/router/index'
+import { asyncRoutes, constantRoutes,routerArray,notFoundRouter } from '@/routers/index'
 import {hasPermission,filterAsyncRoutes} from "@/utils/routers"
 import {filterKeepAlive} from "../../utils/routers";
 export const usePermissionStore = defineStore({
@@ -17,6 +17,9 @@ export const usePermissionStore = defineStore({
     getters: {
         permission_routes:state=> {
             return state.routes
+        },
+        keepAliveRoutes: state=>{
+            return filterKeepAlive(asyncRoutes)
         }
     },
     // 可以同步 也可以异步

src/store/modules/tagsView.ts

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import router from "@/router/index";
+import router from "@/routers/index";
 
 export const useTagsViewStore = defineStore({
     // id: 必须的，在所有 Store 中唯一

src/views/form/advancedForm/index.vue

@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="advancedForm">
+<script lang="ts" setup >
 import AdvancedForm from "@/components/SearchForm/advancedForm/index.vue"
 import {reactive, ref} from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'

src/views/form/validateForm/index.vue

@@ -71,7 +71,7 @@
   </u-container-layout>
 </template>
 
-<script lang="ts" setup name="advancedForm">
+<script lang="ts" setup >
 import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import Upload from './components/Upload.vue'
@@ -140,13 +140,7 @@ const rules = reactive({
 const submitForm = async (formEl: FormInstance | undefined) => {
   console.log('--FORM---', ruleForm)
   if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
+
 }
 
 const resetForm = (formEl: FormInstance | undefined) => {