feat(Menu.vue): 添加面包屑导航和菜单权限

src/components/Breadcrumb/index.vue

@@ -1,42 +1,50 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <el-breadcrumb
+      class="app-breadcrumb"
+      separator-class="el-icon-arrow-right"
+  >
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1"
-              class="no-redirect">
-          {{ item.meta.title }}
-        </span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      <el-breadcrumb-item
+          v-for="(item, index) in breadcrumbs"
+          :key="item.path"
+      >
+        <span
+            v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
+            class="no-redirect"
+        >{{ item.meta.title }}</span>
+        <a
+            v-else
+            @click.prevent="handleLink(item)"
+        >{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
 </template>
 
 <script lang="ts">
-
-import {defineComponent, onBeforeMount, reactive, toRefs,watch} from "vue";
-import {compile} from 'path-to-regexp'
-import {useRoute, RouteLocationMatched} from "vue-router";
-import router from "@router";
-
+import { defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
+import { useRoute, RouteLocationMatched } from 'vue-router'
+import { compile } from 'path-to-regexp'
+import router from '@/router'
 export default defineComponent({
   setup() {
-    const currentRoute = useRoute();
+    const currentRoute = useRoute()
     const pathCompile = (path: string) => {
-      const {params} = currentRoute
+      const { params } = currentRoute
       const toPath = compile(path)
       return toPath(params)
     }
+
     const state = reactive({
-      levelList: [] as Array<RouteLocationMatched>,
+      breadcrumbs: [] as Array<RouteLocationMatched>,
       getBreadcrumb: () => {
         let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
         const first = matched[0]
         if (!state.isDashboard(first)) {
-          matched = [{path: '/dashboard', meta: {title: 'dashboard'}} as any].concat(matched)
+          matched = [{ path: '/dashboard', meta: { title: '首页' } } as any].concat(matched)
         }
-        state.levelList = matched.filter((item) => {
-          return item.mate && item.meta.title && item.meta.breadcrumb !== false
+        state.breadcrumbs = matched.filter((item) => {
+          return item.meta && item.meta.title && item.meta.breadcrumb !== false
         })
       },
       isDashboard(route: RouteLocationMatched) {
@@ -44,23 +52,29 @@ export default defineComponent({
         if (!name) {
           return false
         }
-        return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+        return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
       },
       handleLink(item: any) {
-        const {redirect, path} = item
+        const { redirect, path } = item
         if (redirect) {
-          router.push(redirect)
+          router.push(redirect).catch((err) => {
+            console.warn(err)
+          })
           return
         }
-        router.push(pathCompile(path))
+        router.push(pathCompile(path)).catch((err) => {
+          console.warn(err)
+        })
       }
     })
+
     watch(() => currentRoute.path, (path) => {
       if (path.startsWith('/redirect/')) {
         return
       }
       state.getBreadcrumb()
     })
+
     onBeforeMount(() => {
       state.getBreadcrumb()
     })
@@ -69,10 +83,17 @@ export default defineComponent({
       ...toRefs(state)
     }
   }
+
 })
 
 </script>
+
 <style lang="scss" scoped>
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
@@ -84,4 +105,4 @@ export default defineComponent({
     cursor: text;
   }
 }
-</style>
+</style>