Vue

Vue面包屑导航实现方案

HaoOuBa
2021-02-08 / 0 评论 / 208 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年02月08日,已超过64天没有更新,若内容或图片失效,请留言反馈。

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

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>
6

评论 (0)

取消