如何基于当前 Route/URL 构建动态面包屑组件？

Question

我正在尝试构建一个 Breadcrumbs 组件，根据我当前的 URL

动态生成 link

例如

http://localhost:8080/car/create

我的面包屑应该看起来像

Home > car > create

例如

http://localhost:8080/car/ford

我的面包屑应该看起来像

Home > car > ford

例如

http://localhost:8080/car/ford/raptor

我的面包屑应该看起来像

Home > car > ford > raptor

如何动态构建这样的东西？

我有

<template lang="">
    <v-row>
            <v-breadcrumbs :items="links" class="black--text">
                <template v-slot:divider>
                    <v-icon>mdi-chevron-right</v-icon>
                </template>
            </v-breadcrumbs>
        </v-row>
</template>
<script>
export default {
    name: 'Breadcrumbs',
    props: {
        title: String
    },
    data() {
        return {
            links: [
                {
                    text: 'Home',
                    disabled: false,
                    href: '/'
                },
                {
                    text: this.title,
                    disabled: true,
                    href: 'breadcrumbs_link_2'
                }
            ]
        }
    }
}
</script>

Answer 1

您需要像下面这样实现 computed 属性：

const breadcrumb = Vue.component('breadcrumb', {
  template: '#breadcrumb',
  props: { title: String },
  computed: {
    links: function() {
      return [ 
        { text: 'Home', disabled: false, href: '/' }, 
        { text: this.title, disabled: true, href: 'breadcrumbs_link_2' },
        ...(
          (new URL(window.location.href))
            .pathname
            .split('/')
            .slice(1)
            .map(seg => ({ text: seg, disabled: false, href: seg }))
        )
      ]; 
    }
  }
});

new Vue({ el:"#app", vuetify: new Vuetify(), components: { breadcrumb } });

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<template id="breadcrumb">
  <v-row>
    <v-breadcrumbs :items="links" class="black--text">
      <template v-slot:divider><v-icon>mdi-chevron-right</v-icon></template>
    </v-breadcrumbs>
  </v-row>
</template>

<v-app id="app">
  <breadcrumb title="title_1" />
</v-app>

Answer 2

此解决方案使您能够通过 vue 路由器自定义面包屑上的文本（除了依赖可能并不总是足够的路径文本），甚至还允许捕获 url 参数。

在您的 router.js 中为每个对象添加一个额外的属性

{
          path: "bank-statement",
          component: StorageAccountList,
          name: "storage-accounts",
          meta: {
            title: "Bank Accounts ",
            resource: "bankAccounts",
            breadCrumb: "Bank & Cash accounts"
          }
        },

然后在你计算的包含所有其他组件的主要组件中，添加这个

<v-breadcrumbs
        style="padding-top: 15px; padding-bottom: 0;"
        :items="crumbs"
      >
        <template v-slot:divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>

computed: {
    
    crumbs: function() {
      let pathArray = this.$route.path.split("/");
      pathArray.shift();
      let itemsCount = pathArray.length;

      return pathArray.reduce((breadcrumbArray, path, idx) => {
        let count = idx + 2;
        breadcrumbArray.push({
          // to: {path:idx>1 ? "/" + breadcrumbArray[idx - 1].path + "/" : "/"+path },
          path: path,
          disabled: count > itemsCount,
          href: breadcrumbArray[idx - 1]
            ? "/" + breadcrumbArray[idx - 1].path + "/" + path
            : "/" + path,
          text:
            (this.$route.matched[idx] &&
              this.$route.matched[idx].meta.breadCrumb) ||
            path
        });
        return breadcrumbArray;
      }, []);
    }
  },

如何基于当前 Route/URL 构建动态面包屑组件？

How can I Build Dynamic Breadcrumbs Component base on current Route/URL?

javascript

vue.js

vue-component

vuejs2

vuetify.js