首页 / VUE / Vue动态修改网页标题的方法及遇到问题
Vue动态修改网页标题的方法及遇到问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue动态修改网页标题的方法及遇到问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2507字,纯文字阅读大概需要4分钟。
内容图文
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三).
Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案:
一、最笨方案
结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值。
<script> import axios from 'axios' export default { created () { document.title = '功能授权' }, mounted() { axios.get('***').then((d)=>{ document.title = '功能授权('+ d.Name + ')' }) } } </script>
二、普通方案,使用Vue-Router的beforeEach拦截
项目中使用了Vue Router,在路由文件 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的定义
export default { inserted: function (el, binding) { const { value } = binding if (el.dataset.title) { // 方式1,可以给标签的data-title的属性赋值 document.title = el.dataset.title } else if (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 } else if (value && value.title) { document.title = value.title } } }
在页面上使用v-web-title有两种方式
1.给标签 data-title属性赋值
<template> <div v-web-title :data-title="textTitle"> </template> <script> import axios from 'axios' export default { data(){ return { textTitle:'功能授权' } }, mounted () { axios.get('***').then((d) => { this.textTitle = '功能授权(' + d.Name + ')' }) } } </script>
2.给指令传参
<template> <div v-web-title="{title:textTitle}"> </template> <script> import axios from 'axios' export default { data(){ return { textTitle:'功能授权' } }, mounted () { axios.get('***').then((d) => { this.textTitle = '功能授权(' + d.Name + ')' }) } } </script>
四、参考
1. vue单页面应用中动态修改title 主要介绍使用vue-weachat-title 组件
2.vue.js自定义指令详解 主要介绍自定义指令的钩子函数,以及指令传参等
总结
以上所述是小编给大家介绍的Vue动态修改网页标题的方法及遇到问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
内容总结
以上是互联网集市为您收集整理的Vue动态修改网页标题的方法及遇到问题全部内容,希望文章能够帮你解决Vue动态修改网页标题的方法及遇到问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。