.jpg)
1.最粗爆的
直接使用document.title
router.beforeEach(({ to, from, next }) => {
document.title = to.title || 'XXX.COM'
})2.在router中设置meta
下面代码中的title即是页面的title，路由改变时会自动改变
// 登录
{
path: '/login',
component: () => import(/* webpackChunkName: "login" */'./views/login.vue'),
meta: {
title: '登录'
}
}3.使用vue-meta插件(推荐)
使用vue-meta插件，我们可以在组件中去设置title，比较符合正常的思维，还可以设置description
安装插件
npm install vue-meta --save入口文件中设置：
import VueMeta from 'vue-meta';
Vue.use(VueMeta, {
// 定义组件中的数据对象
keyName: 'head',
});组件中设置
<script>
export default {
head: {
title: "登录",
meta:[
{ name: 'description', content: '登录'}
]
},
...省略...
</script>在App.vue入口模块中，可以设置title模板
设置下面代码后，如登录页面的title其实变成了 “登录 - XX有限公司”
<script>
export default {
head: {
titleTemplate(title) {
title = typeof title === "function" ? title(this.$store) : title;
return title ? `${title} - XX有限公司` : 'XX有限公司';
}
},
...省略...
</script>
评论区