feat:动态路由样式调整

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,47 +1,53 @@
 <template>
-  <div v-if="!item.hidden">
-    <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}">
-          <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-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-
-      <template slot="title">
-        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+  <div>
+    <div v-if="!item.meta ||!item.meta.hidden">
+      <!-- 非嵌套路由 -->
+      <template
+          v-if="!item.children||item.children.length==0">
+        <app-link v-if="item.meta" :to="resolvePath(item.path)">
+          <el-menu-item :index="resolvePath(item.path)" :class="{'submenu-title-noDropdown':!isNest}">
+            <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+            <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+          </el-menu-item>
+        </app-link>
       </template>
 
-      <sidebar-item
-          v-for="child in item.children"
-          :key="child.path"
-          :is-nest="true"
-          :item="child"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu"
-      />
-    </el-sub-menu>
+      <!-- 嵌套路由 -->
+      <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+        <template #title>
+          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+          <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
+        </template>
+
+        <sidebar-item
+            v-for="child in item.children"
+            :key="child.path"
+            :is-nest="true"
+            :item="child"
+            :base-path="resolvePath(child.path)"
+            class="nest-menu"
+        />
+      </el-sub-menu>
+    </div>
   </div>
+
 </template>
 
-<script>
+<script lang="ts">
 import path from 'path-browserify'
+import {defineComponent, PropType} from "vue";
+import {RouteRecordRaw} from 'vue-router'
 import {isExternal} from '@utils/validate'
 import AppLink from './Link.vue'
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
-export default {
+
+export default defineComponent({
   name: 'SidebarItem',
   components: {SvgIcon, AppLink},
   props: {
-    // route object
     item: {
-      type: Object,
+      type: Object as PropType<RouteRecordRaw>,
       required: true
     },
     isNest: {
@@ -53,46 +59,22 @@ export default {
       default: ''
     }
   },
-  data() {
-    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
-    // TODO: refactor with render function
-    this.onlyOneChild = null
-    return {}
-  },
-  methods: {
-    hasOneShowingChild(children = [], parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
+  setup(props) {
+    const resolvePath = (routePath: string) => {
       if (isExternal(routePath)) {
         return routePath
       }
-      if (isExternal(this.basePath)) {
-        return this.basePath
+      if (isExternal(props.basePath)) {
+        return props.basePath
       }
-      return path.resolve(this.basePath, routePath)
+      console.log(props.basePath,routePath)
+      return path.resolve(props.basePath, routePath)
+    }
+
+    return {
+      resolvePath
     }
   }
-}
-</script>
+})
+
+</script>