Question

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

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

在我的breadcrumb单个文件组件中：

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

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

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

这会更好动态：）

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

0 个答案: