2
votes

This is probably really easy and I'm just missing something. I have a vue router page with links that all load up correctly and display correctly.

Hard part out of the way (well it was for me).

I would like to utilise some meta style data attached to each route to provide the page heading title.

So for example:

{
    path: '/scenarios',
    meta: {
        title: "Scenarios!"
    },
    name: 'Scenarios', 
    component: Scenarios
}

The route with a meta title.

I would like to pull this data from here within the route declaration

Stick it on a vue page like this:

<template>
    <span>
        {{ $route.name }}
    </span>

</template>

<script>
    export default {
        name: "PageTitle"
    }
</script>

(this actually works to show the route name at the moment)

And I would like to plug it into my template like this:

 <h1 class="h2">@yield('page-name')
      <page-title></page-title>
 </h1>

(I am using Laravel (5.8 I think))

This similar post might help (using a directive) Pass var to vue router in meta but it would be nice to know if its simpler than that. Thoughts?

1

1 Answers

0
votes

Screw it, ive answered my own question

changed:

<template>
    <span>
        {{ $route.name }}
    </span>

</template>

to:

<template>
    <span>
        {{ $route.meta.title }}
    </span>

</template>