Vue动态修改网页标题的方法及遇到问题

2023-08-22 12:58:04 66

业务需求，进入页面的时候，网页有个默认标题，加载的网页内容不同时，标题需要变更.例:功能授权，功能授权(张三).

Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案:

一、最笨方案

结合业务直接在Vue生命周期函数created和mounted中，给document.title赋值。

二、普通方案，使用Vue-Router的beforeEach拦截

项目中使用了VueRouter，在路由文件index.js中给需要的路由添加title。

routes:[{
path:'/',
name:'home',
component:()=>import('@/pages/home/index'),
meta:{
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
}
})

如果想在页面上依据加载的内容不同再变更title时，请参考方式一的mounted函数处理逻辑.

三、优雅方案，使用Vue自定义指令(directive)

如前文所提，页面获取不同数据状态时，需要展示不同的标题。那么我们可以结合vue自定义指令(directive)可更优雅的处理网页标题的动态更新。

自定义指令v-web-title的定义

exportdefault{
inserted:function(el,binding){
const{value}=binding
if(el.dataset.title){//方式1，可以给标签的data-title的属性赋值
document.title=el.dataset.title
}elseif(value&&value.title){//方式2，指令传参
document.title=value.title
}
},
update(el,binding,vnode,oldVnode){
const{value}=binding
if(el.dataset.title){
document.title=el.dataset.title
}elseif(value&&value.title){
document.title=value.title
}
}
}

在页面上使用v-web-title有两种方式

1.给标签data-title属性赋值

2.给指令传参

四、参考

1.vue单页面应用中动态修改title主要介绍使用vue-weachat-title组件

2.vue.js自定义指令详解主要介绍自定义指令的钩子函数，以及指令传参等

总结

以上所述是小编给大家介绍的Vue动态修改网页标题的方法及遇到问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue动态修改网页标题的方法及遇到问题

热门推荐

随机推荐