Prop "to" not working with named path to root on vuetify v-breadcrumbs

user_14369972 0
Viewed 2181

While using v-breadcrumbs from vuetify, i came upon a problem.

I have a named path in vue-router to "/" route, but when I'm passing it to "to" prop in breadcrumb, it becomes disabled. Other named paths are working just fine. Does anybody have an idea what may be causing this behaviour?

The problematic path:

{
     name: 'bar',  
     path: '/',
     component: () => import('@/foo/bar.vue'),
},

The breadcrumbs items property value look something like this:

[
    {
       text: 'bar',
       disabled: false,
       to: { name: 'bar' }
    }
]
vue-router vuetify.js vue.js
2 Answers

use exact: true,

like:

      {
          text: "Breadcrumb name",
          link: true,
          exact: true,
          disabled: false,
          to: {
            name: 'route name', 
            params: {
                paramName: value
            }
          }
       }
user_59405260

I'm running into the exact same issue here.

I've got exact to true and also passing in the to:{} props.

All the other routes are not showing disabled and working just fine.

path: '/',
        name: 'stepOne',
        text: "1. Velg Hovedmodell",
        component: () => import("../views/choose/stepOne"),
        meta: {
            /* ---------------------- Velg Hovedmodell ------------------------------------------ */
            requiresAuth: false,
            breadcrumb: [
                { 
                    text: "1. Velg Hovedmodell",
                    name: 'stepOne',
                    disabled: true, 
                    link: true,
                    exact: true,
                    to: { name: 'stepOne', path: '/' }, 
                },
user_92888560
Related