Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更.例:功能授权,功能授权(张三).
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。