refactor: BreadCrumb Component

src/layout/components/BreadCrumb/index.vue

@@ -1,38 +1,37 @@
 <script lang="ts" setup>
-import { onBeforeMount, reactive, watch } from "vue"
+import { ref, watch } from "vue"
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router"
 import { compile } from "path-to-regexp"
 
 const route = useRoute()
 const router = useRouter()
 
+const breadcrumbs = ref<RouteLocationMatched[]>([])
+
+const getBreadcrumb = () => {
+  breadcrumbs.value = route.matched.filter((item) => {
+    return item.meta && item.meta.title && item.meta.breadcrumb !== false
+  })
+}
+
 const pathCompile = (path: string) => {
   const { params } = route
   const toPath = compile(path)
   return toPath(params)
 }
 
-const state = reactive({
+const handleLink = (item: RouteLocationMatched) => {
-  breadcrumbs: [] as Array<RouteLocationMatched>,
+  const { redirect, path } = item
-  getBreadcrumb: () => {
+  if (redirect) {
-    const matched = route.matched.filter((item) => item.meta && item.meta.title)
+    router.push(redirect as string).catch((err) => {
-    state.breadcrumbs = matched.filter((item) => {
-      return item.meta && item.meta.title && item.meta.breadcrumb !== false
-    })
-  },
-  handleLink(item: any) {
-    const { redirect, path } = item
-    if (redirect) {
-      router.push(redirect).catch((err) => {
-        console.warn(err)
-      })
-      return
-    }
-    router.push(pathCompile(path)).catch((err) => {
       console.warn(err)
     })
+    return
   }
-})
+  router.push(pathCompile(path)).catch((err) => {
+    console.warn(err)
+  })
+}
 
 watch(
   () => route.path,
@@ -40,23 +39,21 @@ watch(
     if (path.startsWith("/redirect/")) {
       return
     }
-    state.getBreadcrumb()
+    getBreadcrumb()
   }
 )
 
-onBeforeMount(() => {
+getBreadcrumb()
-  state.getBreadcrumb()
-})
 </script>
 
 <template>
   <el-breadcrumb class="app-breadcrumb">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in state.breadcrumbs" :key="item.path">
+      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index === state.breadcrumbs.length - 1" class="no-redirect">{{
+        <span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
-          item.meta.title
+          {{ item.meta.title }}
-        }}</span>
+        </span>
-        <a v-else @click.prevent="state.handleLink(item)">
+        <a v-else @click.prevent="handleLink(item)">
           {{ item.meta.title }}
         </a>
       </el-breadcrumb-item>