如何在Vuejs中动态管理页面标题? [英] How to manage page titles dynamically in Vuejs?
问题描述
我构建了一个应用程序.我有一个带有我页面标题的标题.目前,我使用视图路由器来定义我的标题.
I build an application. I have a header with the title of my page. Currently, I use view-router to define my titles.
{
path: '/events',
name: 'events',
component: Events,
meta: {
title: 'Liste des événements'
}
}
在我的刀片视图中,在我的 header.blade.php 中,我这样做是为了显示标题
And in my blade view, in my header.blade.php I'm doing this to display the title
<h2 class="header__title title-header">
@{{ $route.meta.title }}
</h2>
它可以工作,但是当我有动态数据时,它必然不起作用.例如,当我发帖时,我该怎么做才能获得头衔?
It work BUT when I have a dynamic data, necessarily, it does not work. For example, when I post a post, how can I do to earn my title?
{
path: '/events/:id',
component: Event,
name: 'Event',
meta: {
title: 'my dynamic title',
page: 'event',
},
如何恢复帖子页面的标题?我的帖子中有帖子的名称,但我无法从标题中访问它...
How to recover the title of the post page? I have the name of the post in my post, but I can not access it from my header ...
我无法访问其他组件.这些是来自 element-ui 的组件.
I do not have access to the other components. These are components coming from element-ui.
提前致谢
推荐答案
在你的路由器中,在export default router
之前你可以添加
In your router, before export default router
you can add
router.beforeEach((toRoute, fromRoute, next) => {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
})
这将读取元标题(如果存在)并更新页面标题.
This will read the meta title if it exists and it will update the page title.
或者你可以这样添加
const router = new Router({
beforeEach(toRoute, fromRoute, next) {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
},
routes: [
...
]
})
不要忘记将默认标题值从 Home
更改为其他内容 - 也许是您的项目名称
Don't forget to change the default title value from Home
to something else - maybe name of your project
这篇关于如何在Vuejs中动态管理页面标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!