Vue.js 如何在vuejs中实现面包屑组件？

注意：我没有使用Vue路由器

我想要一个简单的面包屑来跟踪用户在哪个页面/组件上，虽然我已经实现了它，它工作得很好，但感觉不是很干净。最好能有一些想法，也许能把它变成一个小图书馆

在我的面包屑单文件组件中：

<template>
    <div>
        <vk-breadcrumb>
                <vk-breadcrumb-item v-show="currentView === 'Modal' || 'Purposes' || 'Vendors'" v-on:click="$emit('change-view', 'Modal')" href="#">Home</vk-breadcrumb-item>
                <vk-breadcrumb-item v-show="currentView !== 'Modal'" v-on:click="$emit('change-view', 'Purposes')" href="#">Purposes</vk-breadcrumb-item>
                <vk-breadcrumb-item v-show="currentView === 'Vendors'" v-on:click="$emit('change-view', 'Vendors')" href="#">Partners</vk-breadcrumb-item>
        </vk-breadcrumb>
    </div>
</template>

<script>
export default {
  props: ['currentView'],
}
</script>

家
目的
合作伙伴
导出默认值{
道具：['currentView']，
}

然后我将视图作为道具从父级/根级传递：

<app-breadcrumb v-bind:current-view="currentView" v-on:change-view="updateView"></app-breadcrumb>

---

最好让它更具动态性：）

您的实现的问题是，从代表性的角度来看，它感觉很难编码。也就是说，如果不修改组件本身，您将无法在其他地方重用此组件，或者更新您使用的任何组件。您可以考虑构造这个组件，以便它使用一个对象数组，每个对象描述允许和/或不允许显示面包屑的视图以及要发出的点击事件值。可以将其视为将配置对象传递给组件，然后根据配置进行渲染。谢谢，我们将对此进行尝试！既然没有否决票，那么可以认为这是一个可以接受的问题吗？我不能完全确定这是否属于可以接受的问题。它没有得到明确的支持，但也没有被明确地认为是离题的。也就是说，好的问题通常都有客观的答案，而你的问题本质上是主观的。鉴于最后一点，这可能被认为是一个不理想的问题。尽管如此，我还是选择回答你的问题，并选择关注你的组件的更客观的方面，具有最小的可重用性，并在评论中这样做。但是，在将来，请考虑查看有关代码质量的任何问题。他们更倾向于关于代码结构和最佳实践的开放式讨论，更专注于这样的问题：）谢谢你的帮助！