vue-spa 的面包屑插件答案

【问题标题】：breadcrumb-plugin for vue-spavue-spa 的面包屑插件
【发布时间】：2019-06-23 13:32:34
【问题描述】：

我需要为我的 vue-spa 项目实现面包屑。他们需要能够将属性显示为面包屑项。此外，任何路由的部分都应正确识别为面包屑项，并且应具有不必直接写入路由的重定向。

有人知道符合要求的 vue 插件吗？

【问题讨论】：

标签： vue.js single-page-application breadcrumbs

【解决方案1】：

我很高兴使用 vue-2-crumbs 插件，但后来发现它不适用于 SSR，所以我创建了自己的组件，结果发现代码减少了 50 多倍。

Crumbs.vue

<template>
    <ul v-if="stack.length > 0" class="crumbs">
        <li v-for="item in stack" class="crumbs__item" :class="item.class">
            <router-link :to="{ name: item.name }" class="crumbs__link">
                {{ item.label }}
            </router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name:    'Crumbs',
        data() {
            return { stack: [] }
        },
        mounted() {
            this.buildStack()
        },
        methods: {
            buildStack() {
                this.stack = []
                this.addPage(this.$router.currentRoute)
                this.stack = this.stack.reverse()
            },
            addPage(route, first) {
                this.stack.push({
                    name:  route.name,
                    label: route.meta?.breadcrumb?.label || route.name.replace('.', ' '),
                    class: 'crumbs__item--' + (typeof first === 'undefined' ? 'current' : 'parent')
                })
                if (route.meta.breadcrumb.parent) {
                    const parent = this.getRoute(route.meta.breadcrumb.parent)
                    this.addPage(parent, true)
                }
            },
            getRoute(name) {
                return this.$router.options.routes.find(route => route.name === name)
            }
        }
    }
</script>

还有一点 CSS：

.crumbs {
    display:         flex;
    flex-direction:  row;
    list-style-type: none;
    margin:          1rem 0 2rem 0;
    padding:         0;
    flex-wrap:       wrap;
}

.crumbs__link {
    text-decoration: underline;
    text-transform: capitalize;
}

.crumbs__item--parent::after {
    content: '>';
}

我的路线设置与 vue-2-crumbs 插件所需的设置相同。

此组件确实要求您使用 Vue Router。

【讨论】：

【解决方案2】：

您可以使用其他一些 vue 组件，并提供更好的文档。

【讨论】：

【解决方案3】：

面包屑导航类似于导航，但在这里用户知道他/她在哪一步。
在 Vue 我已经提到了this tutorial.

npm封装模块：NPM package

我希望你的要求能得到满足。

【讨论】：

通过教程中的设置，我将如何将路由参数添加到我的面包屑中？例如：将类似“/article/:articleName/detail”的路由显示为“文章 -> 实际文章名称 -> 产品信息”。
github.com/iFgR/vue-breadcrumbs您可以找到完整的代码，以便您轻松匹配剩余的内容。