feat: 修改面包屑的另一种实现方式

src/components/VBreadcrumb/index.ts

@@ -0,0 +1 @@
+export { default } from './src/VBreadcrumb.vue'

src/components/VBreadcrumd/src/VBreadcrumd.vue → src/components/VBreadcrumb/src/VBreadcrumb.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
+import { useBreadCrumb } from '@/stores/modules/breadCrumb'
 
 const router = useRouter()
 const route = useRoute()
+const breadCrumb = useBreadCrumb()
 
 const path = computed(() => {
   const path = route.path

src/components/VBreadcrumd/index.ts

@@ -1 +0,0 @@
-export { default } from './src/VBreadcrumd.vue'

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
+import { useBreadCrumb } from '@/stores/modules/breadCrumb'
 
 const router = createRouter({
   history: createWebHistory(`/${import.meta.env.VITE_BASE_URL}/`),
@@ -94,6 +95,7 @@ const router = createRouter({
 
 // * 路由拦截 beforeEach
 router.beforeEach(async (to, from, next) => {
+  useBreadCrumb().setRouteList(to, from)
   // 如果手动跳转登录页，清除登录信息
   if (to.path === '/login') {
     const userStore = useUserStore()

src/stores/modules/breadCrumb.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+interface Route {
+  label: string
+  path: string
+  query?: string
+}
+interface BreadCrumb {
+  routeList: Route[]
+}
+// 需要添加多级菜单的页面，值为route的name
+const whiteList = ['Booking Detail', 'Tracking Detail', 'Add VGM', 'Public Tracking Detail']
+
+export const useBreadCrumb = defineStore('breadCrumb', {
+  state: (): BreadCrumb => ({
+    routeList: JSON.parse(localStorage.getItem('routeList')) || []
+  }),
+  getters: {},
+  actions: {
+    setRouteList(toRoute: any, fromRoute: any) {
+      const index = this.routeList.findIndex((item) => item.label === toRoute.name)
+      if (index !== -1) {
+        this.routeList.splice(index + 1)
+        return
+      }
+      if (toRoute.name && whiteList.includes(toRoute.name)) {
+        this.routeList.push({
+          label: toRoute.name,
+          path: toRoute.path,
+          query: toRoute.query
+        })
+      } else {
+        this.routeList = [
+          {
+            label: toRoute.name,
+            path: toRoute.path,
+            query: toRoute.query
+          }
+        ]
+      }
+      localStorage.setItem('routeList', JSON.stringify(this.routeList))
+    }
+  }
+})

src/views/Layout/src/components/Header/HeaderView.vue

@@ -61,7 +61,6 @@ const handleSearch = () => {
       })
       .then((res) => {
         if (res.code === 200) {
-          const { searchData } = res.data
           // 如果是在tracking页面搜索，那么isJumpPageBySearch不用置为true，跳转路由后直接清空搜索框
           if (route.path === '/tracking') {
             isJumpPageBySearch.value = false
@@ -112,7 +111,7 @@ const handleLogin = () => {
 
 <template>
   <div class="layout-toolbar">
-    <VBreadcrumd></VBreadcrumd>
+    <VBreadcrumb></VBreadcrumb>
     <div class="right-info">
       <el-input
         v-model="searchValue"

src/views/Login/src/loginView.vue

@@ -186,9 +186,10 @@ const handleLogin = () => {
             name: 'Reset Password'
           })
         }
+        getCode()
       }
     })
-    .finally(() => {
+    .catch(() => {
       getCode()
     })
 }