使用vue-cli在项目创建时会有一个统一默认的title(默认是创建项目的名称),会有根据不同组件(单页面)有不同标题title的需求。
1、在router里每个组件下增加meta
{
path: '/', //用户登录默认页
name: 'Login',
component: Login,
meta:{
title:"登录"
}
},{
path: '/Regist', //用户注册页
name: 'Regist',
component: Regist,
meta:{
title:"注册"
}
},{
path: '/PassWord', //忘记密码页
name: 'PassWord',
component: PassWord,
meta:{
title:"忘记密码"
}
},{
……
}
2、在main.js里添加如下代码
router.beforeEach((to,from,next) =>{
if(to.meta.title){
document.title = to.meta.title
}
next();
})
即可实现根据不同的router,改变不同的标题title。