使用Vue-Router路由信息生成页眉

Question

这可能真的很简单，我只是错过了一些东西。我有一个 vue 路由器页面，其中的链接都正确加载并正确显示。

困难的部分（对我来说）。

我想利用一些附加到每个路由的元样式数据来提供页面标题。

例如：

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

带有元标题的路线。

我想在路由声明中从这里提取这些数据

像这样贴在一个vue页面上：

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

</template>

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

（这实际上是为了显示路线名称）

我想像这样将它插入我的模板中：

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

（我正在使用 Laravel（我认为是 5.8））

这篇类似的帖子可能会有所帮助（使用指令）Pass var to vue router in meta，但如果知道它是否比这更简单，那就太好了。想法？

Answer 1

搞砸了，我回答了我自己的问题

改变：

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

</template>

到：

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

</template>