vue-spa 的面包屑插件

Question

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

有谁知道符合要求的 vue-plugin 吗？

Answer 1

面包屑类似于导航，但用户知道 he/she 在哪一步。
在 Vue 我提到了 this tutorial.

npm 包模块：NPM package

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

Answer 2

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

Answer 3

我很高兴使用 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。

vue-spa 的面包屑插件

breadcrumb-plugin for vue-spa

breadcrumbs

single-page-application

vue.js