瀏覽代碼

refactor(layout): 优化布局组件并添加路由动态命名

- 在布局组件中添加 h-98vh 类以优化高度
-移除布局组件中的冗余 router-view 注释
- 在路由配置中为每个路径动态生成唯一名称,避免重复
nahida 11 月之前
父節點
當前提交
846cd5b071
共有 2 個文件被更改,包括 7 次插入9 次删除
  1. 1 3
      src/layout/index.vue
  2. 6 6
      src/router/index.ts

+ 1 - 3
src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="layout-container-demo">
+  <el-container class="layout-container-demo h-98vh">
     <SilderArea />
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
@@ -7,7 +7,6 @@
       </el-header>
       <el-main>
         <MainArea />
-<!--        <router-view />-->
       </el-main>
     </el-container>
   </el-container>
@@ -17,7 +16,6 @@
 import MainArea from '@/layout/components/MainArea.vue'
 import HeaderArea from '@/layout/components/HeaderArea.vue'
 import SilderArea from '@/layout/components/SilderArea.vue'
-
 </script>
 
 <style scoped>

+ 6 - 6
src/router/index.ts

@@ -10,13 +10,13 @@ const router = createRouter({
       component: () => import('@/layout/index.vue'),
     },
     {
-      path: "/NotFound404",
-      name: "404",
+      path: '/NotFound404',
+      name: '404',
       component: () => import('@/views/NotFound404View.vue'),
     },
     {
       path: '/:pathMatch(.*)*',
-      redirect: '/NotFound404'
+      redirect: '/NotFound404',
     },
   ],
 })
@@ -29,7 +29,7 @@ const dynamicRoutesList = useDynamicRoutes()
 // 调试:检查动态路由数据
 console.log('动态路由列表:', dynamicRoutesList)
 
-dynamicRoutesList.forEach(item => {
+dynamicRoutesList.forEach((item) => {
   // 调试:打印每个路由项信息
   console.log('尝试添加路由:', item)
 
@@ -49,8 +49,8 @@ dynamicRoutesList.forEach(item => {
 
   router.addRoute('layout', {
     path: item.path,
-    name: item.name,
-    component: modules[componentPath]
+    name: item.name + Math.random(),
+    component: modules[componentPath],
   })
 
   console.log('已添加路由:', item.name, '路径:', item.path)