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


Posted in Javascript onJune 09, 2019

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

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动态修改网页标题的方法及遇到问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
javascript实现五星评分功能
Nov 10 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Javascript动画效果(1)
Oct 11 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
vue实现购物车案例
May 30 Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 #Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 #Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python 项目转化为so文件实例
2019/12/23 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
书香家庭事迹材料
2014/05/09 职场文书
经营管理策划方案
2014/05/22 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
三好学生评语大全
2014/12/29 职场文书
公司档案管理制度
2015/08/05 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
JavaScript实现班级抽签小程序
2021/05/19 Javascript
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python