Estoy tratando de construir un componente Breadcrumbs que genere dinámicamente una base de enlaces en mi URL actual
Ex.
http://localhost:8080/car/createMis migas de pan deberían verse como
Inicio > coche > crear
Ex.
http://localhost:8080/car/fordMis migas de pan deberían verse como
Inicio > coche > ford
Ex.
http://localhost:8080/car/ford/raptorMis migas de pan deberían verse como
Inicio > coche > ford > raptor
¿Cómo se construiría dinámicamente algo como esto?
tengo
<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>Necesita implementar una propiedad computed como la siguiente:
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>Esta solución le brinda la capacidad de personalizar el texto en las migajas a través del enrutador vue (aparte de confiar en el texto de la ruta, que puede no ser siempre suficiente) y también permite incluso capturar parámetros de URL.
en su router.js agregue una propiedad adicional a cada objeto
{ path: "bank-statement", component: StorageAccountList, name: "storage-accounts", meta: { title: "Bank Accounts ", resource: "bankAccounts", breadCrumb: "Bank & Cash accounts" } },luego, en su cálculo del componente principal que alberga a todos los demás, agregue esto
<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; }, []); } },