Thu Mar 28 09:56:00 CST 2024 inscode

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Layout from '@/components/layout.vue'
+import Layout from '@/components/layout/index.vue'
 export default {
   name: 'App',
   components: {

src/components/layout/dynamicRoute.vue

+<template>
+    <div>
+        <router-view></router-view>
+    </div>
+</template>
+<script>
+    export default{
+        name:'DynamicRoute',
+        data(){
+            return {
+
+            }
+        },
+
+        mounted(){
+
+        },
+
+        methods:{
+
+        },
+
+    }
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/layout.vue → src/components/layout/index.vue

@@ -3,37 +3,39 @@
         <el-header>
             <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
-                <el-menu-item index="1"><i class="el-icon-s-home"></i>主页</el-menu-item>
+                <template>
+                 <el-menu-item index="1"><i class="el-icon-s-pie"></i>主页</el-menu-item>
+                </template>
                 <el-submenu index="2">
                     <template slot="title">我的工作台</template>
                     <el-menu-item index="2-1">选项1</el-menu-item>
                     <el-menu-item index="2-2">选项2</el-menu-item>
                     <el-menu-item index="2-3">选项3</el-menu-item>
-                    <el-submenu index="2-4">
-                        <template slot="title">选项4</template>
-                        <el-menu-item index="2-4-1">选项1</el-menu-item>
-                        <el-menu-item index="2-4-2">选项2</el-menu-item>
-                        <el-menu-item index="2-4-3">选项3</el-menu-item>
-                    </el-submenu>
                 </el-submenu>
                 <el-menu-item index="3" disabled>消息中心</el-menu-item>
                 <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
             </el-menu>
         </el-header>
         <el-main>
-            <router-view></router-view>
+            <DynamicRoute/>
         </el-main>
     </el-container>
 </template>
 <script>
+import DynamicRoute from './dynamicRoute.vue';
+import routes from '@/router/routes'
+function  converRouteData(arr){
+        
+};
 export default {
     name: 'layout',
+    components:{DynamicRoute},
     data() {
         return {
-            activeIndex: '1',
-            activeIndex2: '1'
+            menuList:[]
         }
     },
+   
     methods: {
         handleSelect(key, keyPath) {
             console.log(key, keyPath);

src/router/routes.js

 import Home from '@/views/Home/index.vue'
+import DynamicRoute from '@/components/layout/dynamicRoute.vue'
 export default [
     {
         path:'/',
+        meta:{title:'主页',icon:'el-icon-s-home'},
         name:'home',
-        meta:{},
         component:Home
     },
     {
-        path:'echarts',
-        redirect:'gantt',
+        path:'/element-ui',
+        meta:{title:'Element-Ui',icon:''},
+        component:DynamicRoute,
+    },
+    {
+        path:'/antdv',
+        meta:{title:'Ant-Design-Vue',icon:''},
+        component:DynamicRoute,
+    },
+    {
+        path:'/echarts',
+        meta:{title:'Echarts',icon:''},
+        component:DynamicRoute,
+        redirect:'/echarts/gantt',
         children:[
             {
-                path:'/echarts/gantt',
+                path:'gantt',
                 name:'Gantt',
-                meta:{},
+                meta:{title:'甘特图'},
                 component:() => import('@/views/Echarts/GanttChart.vue')
             }
         ]