我如何实现像 vue.js 中那样完整的面包屑导航

Question

我已经使用 npm 在我的 vue.js 应用程序中实现了面包屑导航。但是我希望我的面包屑在上一页显示 link，在它旁边显示当前页面（包括 id）的 link。像这样：

主页 > 详细信息页面（可点击 link 秒）

我尝试按照此 link https://www.npmjs.com/package/vue-2-breadcrumbs]

中的示例进行操作

这是我的 index.js 文件

import Vue from 'vue'
import Details from '@/components/Details'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'
import VueBreadcrumbs from 'vue-2-breadcrumbs'

Vue.use(Router)
Vue.use(VueBreadcrumbs,{
template:
    '            <ul class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ul>\n' 
})

export default new Router({
    routes: [
        {
            path: '/',
            component: HomePage,
            name: 'HomePage',
            meta: {
                breadcrumb: 'Home Page',
            },

        },
        {
            path: '/Details/:id',
            component: Details,
            meta:{
                breadcrumb: function () {
                    const {name} = this.$route;
                    return `${name}`;
                  }
            },
            name: 'Details',
            props: true
        }


    ]
})

全部编译，并且渲染（但只有一个 link，即到当前页面）。现在我想将历史 link 添加到我的面包屑（主页 link）。我该怎么做？

Answer 1

将另一个 router-link 添加到您的模板：

<div id="root">
<router-link :to="/">Home</router-link>
<ul class="breadcrumb">
  <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
  </li>
</ul>
</div>

编辑： 以这种方式声明您的模板：

Vue.use(VueBreadcrumbs, {
  template: ```
    <div id="root">
    <router-link :to="/">Home</router-link>
    <ul class="breadcrumb">
      <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
        <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
      </li>
    </ul>
    </div>
  ```
})

Answer 2

好的，所以我从您的所有评论中得到了一些启发，这就是我解决问题的方法：

所以我添加了一个额外的 <li> 来保存“主页”，第二个 <li> 用于在当前页面上循环...我还将所有内容都包装在根目录中 - 所以没有错误大约会出现双根元素。

Vue.use(VueBreadcrumbs,{
template:

'        <div v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
'            <ol class="breadcrumb">\n' +
' <li class="breadcrumb-item"><a href="/">Home</a></li>' +
'                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
'                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
'                </li>\n' +
'            </ol>\n' +
'        </div>'
})

谢谢大家的帮助！

Answer 3

您可以创建自己的面包屑导航

在来自路由器

的文件'index.ts'中

export let activedRoutes: RouteRecord[] = []

router.beforeEach((to, from, next) => {
    activedRoutes = [];
    to.matched.forEach((record) => { activedRoutes.push(record) })
    next();
});

在路由定义中

{
        path: 'my-path-route',
        name: 'MyNameRoute',
        component: () => import('./MyComponent/MyComponent.component.vue'),
        meta: {
            title: 'Title',
            icon: 'my-icon',
            breadcrumb: { label: 'Label of bradcrumb', routeName: 'MyNameRoute'}
        },
}

创建一个 BreadbrumbComponent

    import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import { activedRoutes } from '@/router';

@Component({})
export default class BreadcrumbsComponent extends Vue {

    breadcrumbs = []

    @Watch('$route')
    changeRoute() {
        this.breadcrumbs = activedRoutes.map(e => e.meta?.breadcrumb).filter(e => e);
    }

    created() {
        this.changeRoute()
    }

}

在html BreadcrumbComponent

    <template>
  <div class="breadcrumbs" v-if="breadcrumbs.length > 1">
    <ul class="v-breadcrumbs">
      <template v-for="(item, i) in breadcrumbs">
        <li :key="item.label">
          <router-link
            class="v-breadcrumbs__item"
            :to="{ name: item.routeName }"
            v-html="item.label"
            :class="{ disabled: breadcrumbs.length - 1 == i }"
          />
        </li>
        <li
          v-if="breadcrumbs.length - 1 > i"
          class="v-breadcrumbs__divider"
          :key="item.label"
        >
          <v-icon>mdi-chevron-right</v-icon>
        </li>
      </template>
    </ul>
  </div>
</template>

在 BreadcrumbComponent 的 scss 中

    .breadcrumbs {
    .disabled {
        text-decoration: none;
        color: rgba(0, 0, 0, 0.38);
        cursor: default;
    }
}

现在只在需要的地方使用你的组件

可以使用vuetify的面包屑来补充 https://vuetifyjs.com/en/components/breadcrumbs/#large

我如何实现像 vue.js 中那样完整的面包屑导航

How do I implement breadcrumbs with complete liks in vue.js

breadcrumbs

vue.js