Vue-router: Set $route meta data dynamically.

[pavinthan]

What problem does this feature solve?

For SEO / Layout purpose good to have $route.setMeta method to update current route's meta information because if we view an artical, I'll fetch artical title using route param first, then We can set the page title.

please advice me.

What does the proposed API look like?

To update current route meta data

this.$route.setMeta({
    title: "Example title from service."
})

Then we can have separete hook for route modifed like

router.onUpdate((route) => {
    // do something here
    document.title = route.meta.title;
})

[posva]

The metadata is intentionally not dynamic, that would be like a state. You can already store different metadata in each record and read it in hooks to change the title.

For SEO purposes you might find yourself using https://github.com/nuxt/vue-meta

[pavinthan]

@posva Thanks for your explanation,

but still I'm still unclear about this usecase
I have a question to leave

1. How dynamic route like posts/:postId contains static meta data?

anyway thanks for your effort guys 🙏 vue-router is awesome.

[posva]

Use the meta fields: https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields

[jhicksrowmark]

@posva your answer is not a solution. Here's a practical example: you are loading product data from your API and want to show the product title as the document title. Are you telling me the only option in Vue is to hard-code your entire catalog in the route config? That's ridiculous. Please provide a solution or reopen this for feature consideration.

[cayoub88]

@jhicksrowmark - in your case you would be able to set the meta data on the view making the API call (using the vue-meta plugin mentioned above - it supports async operations).

My issue is related to this ticket but has to do with updating a breadcrumb property. I wanted to base my breadcrumbs on my routes, but some routes (or breadcrumbs) need to be dynamic. And unfortunately the page title cannot be used, because a page title and a breadcrumb are not necessarily always the same thing...

Doing something like this (referenced on the vue forums) does not work...

meta: {
  breadcrumb: route => `${route.params.month}`
}

[posva]

@cayoub88 I don't know the post you are referring to but I imagine that can be combined with an afterEach hook:

router.afterEach(to => {
  updateBreadcrumb(to.meta.breadcrumb(to))
})

Note you might need to go through the matched array depending on how it used (see https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields). In v4 meta is merged from parent to child on to.meta, so it won't require that loop

[cayoub88]

@posva - fantastic, i hadn't thought about invoking to.meta.breadcrumb(to)! Thanks for replying!

[fuoridallarete]

@posva - fantastic, i hadn't thought about invoking to.meta.breadcrumb(to)! Thanks for replying!

Sorry @cayoub88, I didn't get how you used it.
In my code updateBreadcrumb is not defined, how do you set it in the breadcrumb title?

{
          path: '/dayDetail/:id',
          name: 'dayDetail',
          component: () => import('./views/DayDetail.vue'),
          meta: {
            breadcrumb: [
              { title: 'Storico', url: '/history' },
              { title: 'Storico', url: '/history' },
              { title: route => `${route.params.startDate}`, active: true }, // make this title dynamic
            ],
            parent: 'history',
         },
 },

Thanks for the help