feat:动态路由生成

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,41 +1,43 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
+        v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+          <span v-if="onlyOneChild.meta && onlyOneChild.meta.title">{{ onlyOneChild.meta.title }}</span>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template #title>
 
-        <span v-if="item.meta && item.meta.title">{{
+      <template slot="title">
-            t("route." + item.meta.title)
+        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-          }}</span>
+        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
       <sidebar-item
-        v-for="child in item.children"
+          v-for="child in item.children"
-        :key="child.path"
+          :key="child.path"
-        :is-nest="true"
+          :is-nest="true"
-        :item="child"
+          :item="child"
-        :base-path="resolvePath(child.path)"
+          :base-path="resolvePath(child.path)"
-        class="nest-menu"
+          class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 
 <script>
 import path from 'path-browserify'
-import { isExternal } from '@utils/validate'
+import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
+import SvgIcon from '@/components/SvgIcon/index.vue';
 
 export default {
   name: 'SidebarItem',
-  components: {  AppLink },
+  components: {SvgIcon, AppLink},
   props: {
     // route object
     item: {
@@ -76,7 +78,7 @@ export default {
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
         return true
       }
 

src/layout/components/Sidebar/index.vue

@@ -27,7 +27,6 @@ import variables from '@styles/variables.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 
-
 export default defineComponent({
   components: {
     SidebarItem,

src/layout/index.vue

@@ -135,8 +135,8 @@ export default defineComponent({
 
 </script>
 <style lang="scss" scoped>
-@import "@styles/mixin.scss";
+@import "@/styles/mixin.scss";
-@import "@styles/variables.scss";
+@import "@/styles/variables.scss";
 
 .app-wrapper {
   @include clearfix;

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
 import {store,key} from './store'
-import '@styles/index.scss'
+import '@/styles/index.scss'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'

src/router/index.ts

@@ -1,11 +1,14 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 import Layout from '@/layout/index.vue'
 
+
+// 参数配置: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+
 export const constantRoutes: Array<RouteRecordRaw> = [
     {
         path: '/redirect',
         component: Layout,
-        meta: {hidden: true},
+        hidden: true,
         children: [
             {
                 path: '/redirect/:path(.*)',
@@ -15,19 +18,18 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     },
     {
         path: '/login',
-        name: 'Login',
         component: () => import('@/views/login/index.vue'),
-        meta: {title: '登录'}
+        hidden: true
     },
     {
         path: '/404',
         component: () => import('@/views/error-page/404.vue'),
-        meta: {hidden: true}
+        hidden: true
     },
     {
         path: '/401',
         component: () => import('@/views/error-page/401.vue'),
-        meta: {hidden: true}
+        hidden: true
     },
     {
         path: '/',

src/styles/sidebar.scss

@@ -70,18 +70,18 @@
 
     // menu hover
     .submenu-title-noDropdown,
-    .el-submenu__title {
+    .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
       }
     }
 
-    .is-active>.el-submenu__title {
+    .is-active>.el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
-    & .el-submenu .el-menu-item {
+    & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
 
@@ -117,10 +117,10 @@
       }
     }
 
-    .el-submenu {
+    .el-sub-menu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -131,15 +131,15 @@
           margin-left: 19px;
         }
 
-        .el-submenu__icon-arrow {
+        .el-sub-menu__icon-arrow {
           display: none;
         }
       }
     }
 
     .el-menu--collapse {
-      .el-submenu {
+      .el-sub-menu {
-        &>.el-submenu__title {
+        &>.el-sub-menu__title {
           &>span {
             height: 0;
             width: 0;
@@ -152,7 +152,7 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-submenu {
+  .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $sideBarWidth !important;
   }
 
@@ -197,7 +197,7 @@
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover

src/utils/request.ts

@@ -42,7 +42,6 @@ service.interceptors.response.use(
         }
     },
     (error) => {
-        console.log('error', error)
         const {code, msg} = error.response.data
         if (code === 'A0230') {  // token 过期
             Local.clear(); // 清除浏览器全部缓存
@@ -52,6 +51,11 @@ service.interceptors.response.use(
                 })
                 .catch(() => {
                 });
+        }else{
+            ElMessage({
+                message: msg || '系统出错',
+                type: 'error'
+            })
         }
         return Promise.reject(new Error(msg || 'Error'))
     }

src/views/login/index.vue

@@ -135,6 +135,7 @@ export default {
             this.loading = false
           }).catch(() => {
             this.loading = false
+            this.getCaptcha()
           })
         } else {
           console.log('error submit!!')