业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:首页,详情页,个人中心等。
Vue下有很多的方式去修改网页标题,这里总结下解决此问题的两种方案:
方案一(不推荐)
结合业务直接在Vue生命周期函数 created
中,给 document.title
赋值。
<script>
import axios from 'axios'
export default {
created () {
document.title = '功能授权'
}
}
</script>
方案二
使用Vue-Router
的beforeEach
拦截
项目中使用了Vue Router,在路由文件 index.js 中给需要的路由添加 title。
routes: [{
path: '/',
name: 'home',
component: () => import('@/pages/home/index'),
meta:{
title: '首页',
keepAlive: true
}
},
{
path: '/person/auth,
name: 'personAuth',
component: () => import('@/pages/person/auth),
meta:{
title: '个人中心',
keepAlive: false
}
}
]
在路由的beforeEach
拦截器里处理
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
})