How to inject routes parameter ?

[ghost]

Hello everybody ! I'm looking for a way to include parameters, because for every root with params, I always get the path defined in the route file (without the injection). For example, when I'm on my article page, and then I click on the relative part of the breadcrumb I get a link to 'articles/:id', but 'articles/1' was excepted.

I don't know if I'm really clear, but if someone know how to do that, it should be really cool ! :)

Thk !

[navjeetfgmnt]

+1

[karlos545]

+1

[samturrell]

Hi @YannGrosjean - Sorry for the delay.

I have just released a new version of the package to work with both Vue 2.0 and Vue 1.x. This update also includes the addition of route parameters in the included <breadcrumbs> component.

Let me know if you have any issues!

[mhelaiwa]

You could use this plugin to manage localization for your app Vue i18n it uses an extension method to get the value of a specific key from a json file just like $t('home').

In your routes definition you could do so:

const routes = [
    {
        path: '', name: 'dashboard', component: Components.Dashboard, meta: {
            breadcrumb: 'sidebar.dashboard'   //This is the path key inside json translation file
        }
    }
]

And in your breadcrumb template you can use Vue i18n to get the value according to the current locale

<!-- Breadcrumb Template -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <router-link to="/" tag="li" class="breadcrumb-item">
            <a>{{ $t('home') }}</a>
        </router-link>
        <router-link v-for="(crumb, key) in $breadcrumbs" :to="linkProp(crumb)" :key="key" tag="li" class="breadcrumb-item">
            <a v-if="key < $breadcrumbs.length-1">{{ $t(crumb.meta.breadcrumb) }}</a>
            <span v-else>{{ $t(crumb.meta.breadcrumb) }}</span>
        </router-link>
    </ol>
</nav>

Your json file:

{
  "home":"Control Panel",
  "sidebar":{
    "dashboard":"Dashboard"
  }
}