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 相关文章推荐
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 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防注入代码
2010/04/07 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP自定义多进制的方法
2016/11/03 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
jQuery操作cookie
2016/08/08 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
用友笔试题目
2016/10/25 面试题
C#基础面试题
2016/10/17 面试题
仓库保管员岗位职责
2013/12/20 职场文书
善意的谎言事例
2014/02/15 职场文书
推荐信模板
2014/05/09 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
先进工作者申报材料
2014/12/23 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Python实现滑雪小游戏
2021/09/25 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python