Accessing parameter/dynamic URL property in router meta for dynamic page title?

Question

So I have for example this route in my routes:

{ name: 'user', path: '/user/:id', component: User, props: { default: true, sidebar: false }, meta: { showFooter: false, title: `Viewing User ${route.params.id}` } }

I'm essentially wanting to access the id parameter of the URL, to set the title of the page, but I do not want to do it via the component.

Using ${route.params.id} returns undefined, is there an object I can access that will give me the same result? I'm relatively new to Vue and Vue-router, so unsure if this is possible or not.

Maybe I should be setting this in the component, and if so I'm happy to learn why this is the better way to do it :)

Steven Spungin Steven Spungin · Accepted Answer · 2019-06-17T13:07:33

You can simplify this and just use a computed property in your component.

computed: {
  title() { return `Viewing User ${this.$route.params.id}` }
}

If you want to abstract your implementation (for multiple components, etc), set your meta data in beforeRouteUpdate. Then you can access this.$route.

beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // *** has access to `this` component instance. ***
  },

-> has access to this component instance

Accessing parameter/dynamic URL property in router meta for dynamic page title?

1 Answers