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

Posted 2023-02-23

【中文标题】使用Vue-Router路由信息生成页眉

【英文标题】：Use Vue-Router route information to generate page headers

【发布时间】：2020-01-19 17:53:51

【问题描述】：

这可能真的很简单，我只是错过了一些东西。我有一个 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，但如果知道它是否比这更简单，那就太好了。想法？

【参考方案1】：

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

改变：

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

</template>

到：

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

</template>