vue-router修改Title的姿势
这周在写的时候发现不知道怎么改变Title,因为Vue注册的作用域是body,覆盖不到head的title部分,之后查了一下,有人提议说可以把作用域注册到html
,试了之后似乎报了一个Warning,看着也不是什么靠谱的解决方案,作为一个英语渣就随便抽象的查了一下,GitHub有讨论:Accessing route VM within router hooks for updating document.title
现在应该算是比较官方的做法是:
首先加:
<router-view @route-data-loaded="changeTitle"></router-view>
methods: {
changeTitle(vm) {
if (vm.pageTitle) {
document.title = `${vm.pageTitle}`;
}
}
}
加完这波,接下来还要在组件里加上pageTitle:
route: {
data: ({next}) => {
next({
pageTitle: 'Application'
});
}
}
结束。
植入部分
如果您觉得文章不错,可以通过赞助支持我。
如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。
https://github.com/mint-ui/docs/blob/master/src/route.js#L315-L317