Vue.js 在vue应用程序中添加面包屑

我目前在Vue.js框架中工作，需要为应用程序设置面包屑。我正在使用store组件，现在我可以获取当前值和返回状态，但我需要获取面包屑中页面之间的路径。因此，我考虑使用stack[]来存储索引

我陷入困境，有人能帮我吗

const\u state={
当前：“”，
背：错，
堆栈：[]，
};
常量getters={
面包屑：s=>s，
};
常量动作={
设置回（{commit}，值）{
提交（'SET_BACK'，值）；
},
将_设置为当前（{commit}，值）{
提交（'SET_CURRENT'，value）；
},
SET_堆栈（）
};
常数突变={
设置当前（状态、值）{
state.current=值；
},
设置回（状态、值）{
state.back=值；
},
};
导出默认值{
州：_州，
获得者，
行动，
突变，
};如果您以自定义方式进行操作，则必须处理许多问题，如知道何时清理堆栈、每个组件的真实URL（复制路由工作）等等。。。例如，如何将每个组件的
路径
告知
堆栈
函数

如果您使用的是Vue Router，则可以使用Router文件中的附加信息来设置每个部分的面包屑，如：

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        breadcrumb: [
          { name: 'Hello World' }
        ]
      }
    },
    {
      path: '/area1',
      name: 'Area1',
      component: Area1,
      meta: {
        breadcrumb: [
          { name: 'Area 1' }
        ]
      }
    },
    {
      path: '/area12',
      name: 'Area12',
      component: Area12,
      meta: {
        breadcrumb: [
          { name: 'Area 1', link: 'area11' },
          { name: 'Area 2' }
        ]
      }
}
...

这里您有一个和代码源：

我建议使用路由器或面包屑组件，如或

最后，我发现这个“用40行代码编写的非常简单的Vue面包屑”；也许它更适合你

希望有帮助
 



返回


{{current}}


我很高兴使用这个插件，但后来发现它与SSR不兼容，所以我创建了自己的组件

crumps.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>

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

我很惊讶我的组件是42行，而vue-2-crumps插件是2317行。也许有一些额外的功能在那里，但即使如此

就我的使用而言，它的执行方式完全相同。
我需要为stack method（在面包屑中获取页面导航）设置突变，检查到下一个注释应答当前和返回状态在面包屑中单独工作，现在我想在面包屑中获取路径，我正在添加堆栈函数，我不确定在突变中获取索引值的逻辑
.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: '>';
}