k_online_ui/src/stores/modules/breadCrumb.ts

import { defineStore } from 'pinia'

interface Route {
  breadName: string

  path: string
  query?: string
}
interface BreadCrumb {
  routeList: Route[]
}
// 需要添加多级菜单的页面，值为route的name
const whiteList = [
  'Booking Detail',
  'Tracking Detail',
  'Tracking Download Attachment',
  'Add VGM',
  'Public Tracking Detail',
  'Create New Rule',
  'System Message Detail',
  'Configurations',
  'Create New Booking',
  'Destination Create New Rule',
  'Create Report Template',
  'Report Schedule',
  'Report Detail',
  'Modify Booking',
  'System Message Detail',
  'Public Tracking Detail',
  'Configurations'
]

export const useBreadCrumb = defineStore('breadCrumb', {
  state: (): BreadCrumb => ({
    routeList: JSON.parse(localStorage.getItem('routeList')) || []
  }),
  getters: {},
  actions: {
    setRouteList(toRoute: any) {
      const index = this.routeList.findIndex((item) => item.label === toRoute.name)
      // 返回之前的路由时，删除之后的所有路由
      if (index !== -1) {
        this.routeList.splice(index + 1)
        return
      }
      if (toRoute.name === 'Destination Create New Rule') {
        let breadName = ''
        if (toRoute.query.a != undefined) {
          breadName = 'Modify Rule'
        } else {
          breadName = 'Create New Rule'
        }
        this.routeList = [
          {
            breadName: 'Destination Delivery',
            label: 'Destination Delivery',
            path: '/destination-delivery',
            query: ''
          },
          {
            breadName: 'Configurations',
            label: 'Configurations',
            path: '/destination-delivery/configurations',
            query: ''
          },
          {
            breadName: breadName,
            label: toRoute.name,
            path: '/destination-delivery/create-new-rule',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'Create New Booking') {
        let breadName = ''
        if (toRoute.query.a != undefined) {
          breadName = 'Modify Booking'
        } else {
          breadName = 'Create New Booking'
        }
        this.routeList = [
          {
            breadName: 'Destination Delivery',
            label: 'Destination Delivery',
            path: '/destination-delivery',
            query: ''
          },
          {
            breadName: breadName,
            label: toRoute.name,
            path: '/destination-delivery/create-new-booking',
            query: toRoute.query
          }
        ]

      } else if (toRoute.name && whiteList.includes(toRoute.name)) {
        this.routeList.push({
          breadName: toRoute?.meta?.breadName || toRoute.name,
          label: toRoute.name,
          path: toRoute.path,
          query: toRoute.query
        })
      } else {
        this.routeList = [
          {
            label: toRoute.name,
            breadName: toRoute?.meta?.breadName || toRoute.name,
            path: toRoute.path,
            query: toRoute.query
          }
        ]
      }
      localStorage.setItem('routeList', JSON.stringify(this.routeList))
    },
    getUpperRoute() {
      return this.routeList[this.routeList.length - 2]
    }
  }
})