feat:动态路由样式调整

src/layout/components/Sidebar/Link.vue

@@ -1,43 +1,40 @@
 <template>
-  <component :is="type" v-bind="linkProps(to)">
+  <a
+      v-if="isExternal(to)"
+      :href="to"
+      target="_blank"
+      rel="noopener"
+  >
     <slot />
-  </component>
+  </a>
+  <div
+      v-else
+      @click="push"
+  >
+    <slot />
+  </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { isExternal } from '@/utils/validate'
-
-export default {
+import { useRouter } from 'vue-router'
+export default defineComponent({
   props: {
     to: {
       type: String,
       required: true
     }
   },
-  computed: {
-    isExternal() {
-      return isExternal(this.to)
-    },
-    type() {
-      if (this.isExternal) {
-        return 'a'
-      }
-      return 'router-link'
+  setup(props) {
+    const router = useRouter()
+    const push = () => {
+      router.push(props.to)
     }
-  },
-  methods: {
-    linkProps(to) {
-      if (this.isExternal) {
-        return {
-          href: to,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        to: to
-      }
+    return {
+      push,
+      isExternal
     }
   }
-}
-</script>
+})
+</script>

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>

src/layout/components/Sidebar/index.vue

@@ -1,29 +1,38 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse"/>
+
+
+    <!-- :background-color="variables.menuBg"
+          :text-color="variables.menuText"
+          :active-text-color="variables.menuActiveText"-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
-          :background-color="variables.menuBg"
-          :text-color="variables.menuText"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          active-text-color="#409EFF"
           :unique-opened="false"
-          :active-text-color="variables.menuActiveText"
           :collapse-transition="false"
-          mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route"
-                      :base-path="route.path"/>
+          mode="vertical">
+        <sidebar-item
+            v-for="route in routes"
+            :item="route"
+            :key="route.path"
+            :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
+
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {computed, defineComponent} from "vue";
 import SidebarItem from './SidebarItem.vue'
 import Logo from './Logo.vue'
-import variables from '@styles/variables.scss'
+import variables from '@/styles/variables.scss'
 import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 
@@ -33,17 +42,11 @@ export default defineComponent({
     Logo
   },
   setup() {
-    const store = useStore()
+    const store = useStore();
     const route = useRoute()
-    const sidebar = computed(() => {
-      return store.state.app.sidebar
-    })
-    const routes = computed(() => {
-      return store.state.permission.routes
-    })
-    const showLogo = computed(() => {
-      return store.state.settings.sidebarLogo
-    })
+    const sidebar = computed(() => store.state.app.sidebar)
+    const routes = computed(() => store.state.permission.routes)
+    const showLogo = computed(() => store.state.settings.sidebarLogo)
     const activeMenu = computed(() => {
       const {meta, path} = route
       // if set path, the sidebar will highlight the path you set
@@ -52,9 +55,7 @@ export default defineComponent({
       }
       return path
     })
-    const isCollapse = computed(() => {
-      return !sidebar.value.opened
-    })
+    const isCollapse = computed(() => !store.state.app.sidebar.opened)
 
     return {
       sidebar,
@@ -62,7 +63,7 @@ export default defineComponent({
       showLogo,
       variables,
       activeMenu,
-      isCollapse
+      isCollapse,
     }
   }
 })