현재 루트/URL에 다이내믹 브레드 크럼 컴포넌트 베이스를 구축하려면 어떻게 해야 합니까?

현재 루트/URL에 다이내믹 브레드 크럼 컴포넌트 베이스를 구축하려면 어떻게 해야 합니까?

현재 URL에서 링크 베이스를 동적으로 생성하는 Breadcrumbs 구성 요소를 구축하려고 합니다.

---

예.

http://localhost:8080/car/create

내 빵 부스러기는

Home > car > create

---

예.

http://localhost:8080/car/ford

내 빵 부스러기는

홈 > 자동차 > 포드

---

예.

http://localhost:8080/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>

를 실장할 필요가 있습니다.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>

이 솔루션에서는 vue 라우터를 통해 부스러기의 텍스트를 커스터마이즈할 수 있으며(항상 충분하지 않을 수 있는 경로텍스트에 의존하지 않고) URL 파라미터도 캡처할 수 있습니다.

각 오브젝트에 추가 속성을 추가합니다.

{
          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;
      }, []);
    }
  },

언급URL : https://stackoverflow.com/questions/70427567/how-can-i-build-dynamic-breadcrumbs-component-base-on-current-route-url