使用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>