使用element-plus中的Breadcrumb 面包屑实现vue路由跳转

不废话，直接上代码

export interface ResultInt {
  result: boolean // 判断结果
  index: number // 该路由信息在数组的位置
}

export interface RouteInt {
  path: string // 路由路径
  name: string // 路由名称(注意：该名称指的不是路由的name, 而是路由元中的路由名称)
}

export class Result implements ResultInt {
  result = false
  index = -1
}

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      meta: {
        title: '首页'
      },
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/userInfo',
      name: 'userInfo',
      meta: {
        title: '用户信息'
      },
      component: () => import('@/views/UserInfo.vue')
    }
  ]
})

export default router

如果不对数据进行持久化处理，那么当页面刷新的时候，之前存储在数组里的路由信息就会消失，所以这里我们可以选择vue提供的pinia持久化管理库来进行数据的持久化。

import { defineStore } from 'pinia'
import type { RouteInt } from '@/types/common'

export const routeStore = defineStore({
  id: 'route',
  state: () => ({
    routeList: JSON.parse(
      localStorage.getItem('routeList') || '[]'
    ) as Array<RouteInt>
  }),
   actions: {
    addRoute(route: RouteInt): void {
      this.routeList.push(route)
      this.saveLocalStorage()
    },
    deleteRoute(index: number, len: number): void {
      this.routeList.splice(index, len)
      this.saveLocalStorage()
    },
    saveLocalStorage(): void {
      localStorage.setItem('routeList', JSON.stringify(this.routeList))
    }
  },
  getters: {}
})

 // App.vue
<script setup lang="ts">
import { Result, type ResultInt } from './types/common'
import { routeStore } from './stores/routeStore'
import { useRouter, RouterView } from 'vue-router'

const ROUTER = useRouter()
const ROUTE_STORE = routeStore()
// 在路由跳转之前进行判断
ROUTER.beforeEach((to, from, next) => {
  let { result, index } = checkEleInArray(to.path)
  // 如果ROUTE_STORE.routeList中已经包含前往路径，则说明用户是回退，则要删除数组里目标路径后面的所有元素
  if (result) {
    // 获取到要删除的元素个数
    let len = ROUTE_STORE.routeList.length - index
    ROUTE_STORE.deleteRoute(index, len)
  } else {
    ROUTE_STORE.addRoute({ path: to.path, name: to.meta.title as string })
  }
  next()
})

// 检查ROUTE_STORE.routeList里是否包含目标元素
let checkEleInArray = (targetPath: string): ResultInt => {
  let result: ResultInt = new Result()
  for (let item of ROUTE_STORE.routeList) {
    result.index += 1
    if (item.path == targetPath) {
      /*
       * 这里加1的原因是因为我们需要删除的元素中不能包含目标路径
       * 而目前result.index的值是目标路径在数组中的位置
       */
      result.index += 1 
      result.result = true
      return result
    }
  }
  return result
}
</script>

<template>
  <div class="app">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        v-for="(item, key) in ROUTE_STORE.routeList"
        :key="key"
        :to="{ path: item.path }"
        >{{ item.name }}</el-breadcrumb-item
      >
    </el-breadcrumb>
    <RouterView class="route" />
  </div>
</template>