没有合适的资源?快使用搜索试试~ 我知道了~
首页Vue项目添加动态浏览器头部title的方法
资源详情
资源推荐
Vue项目添加动态浏览器头部项目添加动态浏览器头部title的方法的方法
主要介绍了Vue项目添加动态浏览器头部title的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参
考。一起跟随小编过来看看吧
0. 直接上 预览链接 + 效果图
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)
})
源码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
weixin_38717896
- 粉丝: 4
- 资源: 885
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 保险服务门店新年工作计划PPT.pptx
- 车辆安全工作计划PPT.pptx
- ipqc工作总结PPT.pptx
- 车间员工上半年工作总结PPT.pptx
- 保险公司员工的工作总结PPT.pptx
- 报价工作总结PPT.pptx
- 冲压车间实习工作总结PPT.pptx
- ktv周工作总结PPT.pptx
- 保育院总务工作计划PPT.pptx
- xx年度现代教育技术工作总结PPT.pptx
- 出纳的年终总结PPT.pptx
- 贝贝班班级工作计划PPT.pptx
- 变电值班员技术个人工作总结PPT.pptx
- 大学生读书活动策划书PPT.pptx
- 财务出纳月工作总结PPT.pptx
- 大学生“三支一扶”服务期满工作总结(2)PPT.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功