vue3实现面包屑-基础实现

1.在默认路由router文件下新增两个额外的文件page：存放额外的路由列表，注意这里需要引入有router-view视图的页面，这里我是采用let Main = () => import("@v/layout/Main.vue");代码：

在page中使用：

2.dynamicAddRouter处理不匹配的路由和注册page路由表到router中

3.面包屑组件：

3.状态管理代码：

import router from '@/router'

import { ClassTag } from '#/index'

import { defineStore } from 'pinia'

import { inject } from 'vue'

import type { RouteLocationNormalizedLoaded } from 'vue-router'

export const useTagStores = defineStore('Tag', {

state: () => ({

    tagList: [new ClassTag("/accountmanage/accountlist", "商户列表", "home")],//路由列表

    reload :inject("reload") as any

}),

actions: {

    // 添加

    pushTag(route: RouteLocationNormalizedLoaded, index: number = -1) {

        const { fullPath, meta, name } = route

        // 如果当前路由是redirect，则返回不添加标签页

        if ("redirect" === name) {

            return;

        }

        let openTags = this.tagList

        let findIndex = openTags.find((item: ClassTag) => item.fullPath == fullPath)

        if (!findIndex) {

            var i = index > -1 ? index : openTags.length

            openTags.splice(i, 0, new ClassTag(fullPath, meta.title as string, name as string))

        }

    },

    // 妙处，清空列表在添加避免将其他模块的路由增加进去

    settagList(route: RouteLocationNormalizedLoaded) {

        const { fullPath, meta, name } = route

        let openTags = this.tagList

        openTags.splice(0)

        openTags.splice(1, 1, new ClassTag(fullPath, meta.title as string, name as string))

    },

    // 点击跳转

    headerTab(index: number) {

        let tag = this.tagList[index]

        let route = router.currentRoute.value

        if (tag.fullPath != route.fullPath) {

            router.push(tag.fullPath);

        }

    },

    /**

     * 右键菜单功能

     */

    Command({ code, fullPath }: { code: number, fullPath: string }) {

        let openTags = this.tagList

        let route = router.currentRoute.value

        //点击标签页索引

        let index = openTags.findIndex((item) => item.fullPath == fullPath);

        //当前激活状态的标签页索引

        let activeIndex = openTags.findIndex((item) => item.fullPath === route.fullPath);

        switch (code) {

            case 1:

                this.reload();

                break;

            case 2://关闭左侧所有标签页

                openTags.splice(0, index);

                if (activeIndex != index||activeIndex <= index) {

                    router.push(openTags[0]?.fullPath);

                }

                break;

            case 3://关闭右侧所有标签页

                // 删除右侧所有标签页

                openTags.splice(index + 1);

                // 如果当前页面被删除，显示右击菜单页

                if (activeIndex > index) {

                    router.push(openTags[index].fullPath);

                }

                break;

            case 4:

                this.removePath(fullPath)

                break;

            case 5: //关闭所有标签页

                openTags.splice(1);

                router.push(openTags[0].fullPath);

                break;

        }

    },

    // 删除

    removePath(fullPath: string) {

        let openTags = this.tagList

        let index = openTags.findIndex(item => item.fullPath === fullPath)

        if (-1 != index) {

            this.removeTab(index)

        }

    },

    removeTab(index: number) {

        let openTags = this.tagList

        let tag = openTags[index]

        // 获取当前路由信息

        let route = router.currentRoute.value

        // 如果当前路由的 fullPath 等于 tag 的 fullPath，则说明需要进行路由跳转

        if (route.fullPath == tag.fullPath) {

            // openTags[index + 1] || openTags[index - 1] 判断跳转到哪个路由（下一个或上一个），并将该路由的全路径赋值给 fullPath 变量

            let { fullPath } = openTags[index + 1] || openTags[index - 1];

            router.push(fullPath);

        }

        // 在 openTags 中删除指定下标的元素

        openTags.splice(index, 1)

    },

},

persist: true//开启持久化

})