breadcrumb

src/composables/useBreadcrumbs.ts

@@ -16,19 +16,22 @@ export function useBreadcrumbs() {
   const router = useRouter()
 
   const breadcrumbs = computed<Breadcrumb[]>(() => {
-    const matched = route.matched.filter((record) => record.meta.breadcrumb)
+    const matched = route.matched.filter((record) => {
+      return record.meta.breadcrumb
+    })
 
-    return matched.map((record, index) => {
+    const paths = matched.map((record, index): Breadcrumb => {
       const { breadcrumb } = record.meta
       const title = typeof breadcrumb === 'function' ? breadcrumb(route) : (breadcrumb as string)
       const isLast = index === matched.length - 1
-      const to =
+      const to = !isLast && record.name ? router.resolve({ name: record.name, params: route.params }).path : undefined
-        !isLast && record.name
-          ? router.resolve({ name: record.name, params: route.params }).path
-          : undefined
 
       return { title, to, disabled: isLast }
     })
+
+    const value: Breadcrumb[] = []
+    value.push({ title: 'Home', to: '/', disabled: paths.length === 0 })
+    return value.concat(paths)
   })
 
   return { breadcrumbs }

src/layouts/DefaultLayout.vue

@@ -109,7 +109,7 @@ const fluid = computed(() => {
           <app-breadcrumbs />
         </div>
         <div class="layout-content">
-          <slot></slot>
+          <slot />
         </div>
       </v-container>
     </v-main>