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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
JQuery实现图片轮播效果
May 08 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
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
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php设计模式之单例模式代码
2016/06/11 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
python脚本开机自启的实现方法
2019/06/28 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
军训教官感言
2014/03/02 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2014年科协工作总结
2014/12/09 职场文书
长城英文导游词
2015/01/30 职场文书
大学教师个人总结
2015/02/10 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
团队拓展训练感想
2015/08/07 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android