Question

我需要实现我的VUE的水疗项目面包屑。它们需要能够将属性显示为面包屑项目。另外，任何路线的各个部分都应正确标识为面包屑项目，并应具有不必直接写入路线的重定向。

一VUE-插件，符合要求？

这是没有人知道

Answer 1

面包屑类似于导航，但是用户在这里知道他/她在哪一步。
在 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路由器。

用于vue-spa的面包屑插件

3 个答案: