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

Question

注意：我没有使用 Vue-Router。

我想要一个简单的面包屑来跟踪用户所在的页面/组件，虽然我已经实现了它并且它工作正常，但感觉不是很干净。得到一些想法会很好，也许把它变成一个小库......

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

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

然后我只是将视图作为来自父/根的道具传递：

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

让它更有活力会很好:)

标签： vue.jsvuejs2