Vue项目添加动态浏览器头部title的方法


Posted in Javascript onJuly 11, 2018

0. 直接上 预览链接 + 效果图

Vue项目添加动态浏览器头部title

Vue项目添加动态浏览器头部title的方法

Vue项目添加动态浏览器头部title的方法

1. 实现思路

( 1 ) 从路由router里面得到组件的title

( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面)

( 3 ) 设置 title

(1)从路由router里面得到组件的title

router.beforeEach((to, from, next) => {} 里面

const browserHeaderTitle = to.name

( 2 ) title存vuex

SET_BROWSERHEADERTITLE: (state, action) => {
  state.browserHeaderTitle = action.browserHeaderTitle
 }

 store.commit('SET_BROWSERHEADERTITLE', {
  browserHeaderTitle: browserHeaderTitle
 })

( 3 ) 设置 title

我们在路由after后设置title

/**
 * 设置浏览器头部标题
 */
export const setTitle = function(title) {
 title = title ? `${title}` : 'NxAdmin'
 window.document.title = title
}

router.afterEach(() => {
 NProgress.done() // 结束Progress
 setTimeout(() => {
 const browserHeaderTitle = store.getters.browserHeaderTitle
 setTitle(browserHeaderTitle)
 }, 0)
})

源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS array 数组详解
Mar 22 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
node.js到底要不要加分号浅析
Jul 11 #Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 #Javascript
Vue如何实现响应式系统
Jul 11 #Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 #Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 #Javascript
vue使用中的内存泄漏【推荐】
Jul 10 #Javascript
Vue脚手架的简单使用实例
Jul 10 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php笔记之:AOP的应用
2013/04/24 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jQuery对val和atrr("value")赋值的区别介绍
2014/09/26 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
node+vue实现文件上传功能
2020/05/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
优秀演讲稿范文
2013/12/29 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
市场营销毕业求职信
2014/08/07 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
大学生入党自荐书
2015/03/05 职场文书
国王的演讲观后感
2015/06/03 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
Android自定义双向滑动控件
2022/04/19 Java/Android