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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
BootStrap 导航条实例代码
May 18 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vue自动化表单实例分析
May 06 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
js中arguments对象的深入理解
May 14 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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简单浏览目录内容的实现代码
2013/06/07 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
laravel5.6实现数值转换
2019/10/23 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
js实现简单进度条效果
2020/03/25 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python魔法方法详解
2019/02/13 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
2014年镇党建工作汇报材料
2014/11/02 职场文书
学前教育见习总结
2015/06/23 职场文书