fix:修复切换路由动画导致白屏的问题

src/router/index.ts

@@ -7,10 +7,9 @@ import Layout from "@/views/layout/index.vue"; //首页布局
 import CallBack from "@/views/login/OauthCallBack.vue"; //反馈页面
 import Home from "@/views/home/index.vue"; //家
 import Auth from "@/views/role/pages/Auth.vue"; //权限管理
-import Menu from '@/views/system/menu/index.vue'; //动态权限菜单
+import Menu from "@/views/system/menu/index.vue"; //动态权限菜单
-import Register from '@/views/login/Register.vue'; //用户注册
+import Dict from "@/views/system/dict/index.vue"; //用户字典
-import Dict from '@/views/system/dict/index.vue'; //用户字典
+import GlobalSys from "@/views/system/globalSys/index.vue"; //全局参数
-import GlobalSys from '@/views/system/globalSys/index.vue'; //全局参数
 import { getToken } from "@/utils/auth";
 
 const whiteList = ["/callback"];
@@ -26,24 +25,18 @@ const routes: Array<RouteRecordRaw> = [
     name: "CallBack",
     component: CallBack,
   },
-  {
-    path:'/register',
-    name:'register',
-    component:Register
-  },
   {
     path: "/layout",
     name: "Layout",
     component: Layout,
     children: [
       {
-        path: "",
+        path: "", // 匹配 /layout
         name: "home",
         component: Home,
       },
-      // 后续用动态菜单
       {
-        path: "role",
+        path: "role", // 匹配 /layout/role
         name: "roleAuth",
         component: Auth,
       },
@@ -53,15 +46,15 @@ const routes: Array<RouteRecordRaw> = [
         component: Menu,
       },
       {
-        path:'dict',
+        path: "dict",
-        name:'dict',
+        name: "dict",
-        component:Dict
+        component: Dict,
       },
       {
-        path:'globalSys',
+        path: "globalSys",
-        name:'globalSys',
+        name: "globalSys",
-        component:GlobalSys
+        component: GlobalSys,
-      }
+      },
     ],
   },
 ];

src/views/layout/components/LayoutNav.vue

@@ -39,10 +39,7 @@ const menuOptions: MenuOption[] = [
                 RouterLink,
                 {
                     to: {
-                        name: 'home',
+                        name: 'home'
-                        params: {
-                            lang: 'zh-CN'
-                        }
                     }
                 },
                 { default: () => '概览' }
@@ -60,10 +57,7 @@ const menuOptions: MenuOption[] = [
                     RouterLink,
                     {
                         to: {
-                            name: 'roleAuth',
+                            name: 'roleAuth'
-                            params: {
-                                lang: 'zh-CN'
-                            }
                         }
                     },
                     { default: () => '权限分配' }
@@ -83,10 +77,7 @@ const menuOptions: MenuOption[] = [
                     RouterLink,
                     {
                         to: {
-                            name: 'menu',
+                            name: 'menu'
-                            params: {
-                                lang: 'zh-CN'
-                            }
                         }
                     },
                     { default: () => '菜单管理' }
@@ -99,10 +90,7 @@ const menuOptions: MenuOption[] = [
                     RouterLink,
                     {
                         to: {
-                            name: 'dict',
+                            name: 'dict'
-                            params: {
-                                lang: 'zh-CN'
-                            }
                         }
                     },
                     { default: () => '字典配置' }
@@ -115,10 +103,7 @@ const menuOptions: MenuOption[] = [
                     RouterLink,
                     {
                         to: {
-                            name: 'globalSys',
+                            name: 'globalSys'
-                            params: {
-                                lang: 'zh-CN'
-                            }
                         }
                     },
                     { default: () => '全局参数' }

src/views/layout/index.vue

@@ -6,7 +6,9 @@
       <n-layout-content content-style="padding: 16px; height: calc(100vh - 60px);" :native-scrollbar="false">
         <router-view v-slot="{ Component }">
           <transition name="slide-fade" mode="out-in">
+            <div style="height: 100%;width: 100%;" :key="$route.fullPath">
               <component :is="Component" />
+            </div>
           </transition>
         </router-view>
       </n-layout-content>
@@ -29,11 +31,11 @@ import LayoutNav from './components/LayoutNav.vue';
 }
 
 .slide-fade-enter-active {
-  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  transition: all 0.47s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 
 .slide-fade-leave-active {
-  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  transition: all 0.47s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
 
 .slide-fade-enter-from {