laravel - 如何在Vuejs中动态管理页面标题？

Question

我建立一个应用程序。我的标题带有页面标题。目前，我使用view-router定义标题。

{
    path: '/events',
    name: 'events',
    component: Events,
    meta: {
        title: 'Liste des événements'
    }
}

在我的 Blade View 中，在header.blade.php中，我这样做是为了显示标题

 <h2 class="header__title title-header">
    @{{ $route.meta.title }}
 </h2>

但是，当我有动态数据时，它可以正常工作，但肯定不起作用。例如，当我发布帖子时，如何获得标题？

    {
    path: '/events/:id',
    component: Event,
    name: 'Event',
    meta: {
        title: 'my dynamic title',
        page: 'event',
    },

如何恢复帖子页面的标题？我在帖子中有帖子的名称，但是无法从标题中访问它...



我无权访问其他组件。这些是来自element-ui的组件。

先感谢您

Answer 1

在路由器中，您可以在export default router之前添加

router.beforeEach((toRoute, fromRoute, next) => {
  window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';

  next();
})

这将读取元标题(如果存在)并将更新页面标题。

或者您可以像这样添加

const router = new Router({
  beforeEach(toRoute, fromRoute, next) {
    window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';

    next();
  },
  routes: [
    ...
  ]
})

不要忘记将默认标题值从Home更改为其他名称-也许是项目的名称