一 在创建Vue项目时一般会用默认的项目标题和图标,如下图所示:
不是很美观也可能不符合项目的需求,所以有时候就需要改变项目在浏览器上方的标签名称或者图标。
找到项目根目录的index.hml,如图:
如果需要在标题旁边加入自定义的图标,你需要把自己的的图片放在static目录下(不要放在src目录下,浏览器会找不到) 图片必须是 .ico
将favicon.ico的图标文件放到static文件夹内,在index.html的head中添加:
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
二 下面是用路由处理 title 代码示例亲测有效
const router=new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login,
meta: {
title: '登录'
}
},
{
path: '/login',
name: 'Login',
component: Login,
meta: {
title: '登录'
}
},
{
path:'/home',
name:'Home',
component:Home,
meta: {
title: '首页'
}
}
]
})
router.beforeEach((to,form,next) =>{
/*路由变化修改title*/
if(to.meta.title){
document.title=to.meta.title
}
next();
})
export default router