Vue面包屑导航实现方案

例如想实现一个 首页 / 项目列表 / 我的项目 这样的面包屑

1、首先在路由js文件里写上面包屑对应的名称

router.js

export default [
    {
        path: "/",
        children: [
            {
                path: "/todoList",
                component: TodoList,
                name: "todoList"
                meta: {
                    breadName: "项目列表"
                }
            },
            {
                path: "/todoList/mylist",
                component: MyList,
                name: "mylist"
                meta: {
                    breadName: "我的项目"
                }
            },
        ]
    }
]

2、编写面包屑组件

<template>
    <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbList" :key="index">
            {{breadcrumb.meta.breadName}}
        </a-breadcrumb-item>
    </a-breadcrumb>
</template>

<script>
export default {
    computed: {
        breadcrumbList () {
            // 先定义一个变量 用于存放计算出来的导航数组
            let breadArr = []
            // 获取当前页面的路由， 并将路由字符串截取第一个/， 然后组成数组
            let path = this.$route.path.substr(1).split("/")    // >>> ["todoList", mylist]
            // 获取所有页面的路由地址，通过this.$router.options拿到， 具体样子可以打印看看
            const allRouter = this.$router.options.routes[0].children
            // 然后循环allRouter找到里面中符合的path的2个，将他们存起来
            allRouter.forEach(_ => {
                // 判断path的每一项是否有allRouter里的某项
                if (path.some(_item => _item === _.name)) {
                    breadArr.push(_)
                }
            })
            console.log(breadArr) // 打印下看看数据是否正确， 如果为两项， 并且每项里面都有meta内容， 则正确
            // 因为这个数组里是没有 首页 这一项的， 我们自己手动添加一个就好, 此时用到unshift
            breadArr.unshift({
                path: "/",
                meta: {
                    breadName: "首页"
                }
            })
            // 最后computed 需要return出去， return出去这个数组就好了
            return breadArr
        }
    } 
}
</script>