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

发布时间：2020-12-17 03:08:41 所属栏目：百科来源：网络整理

导读：0. 直接上预览链接 + 效果图 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex （本项目已经封装h5的sessionStorage和localStorage也可以存在这里面） ( 3 ) 设置 title （1）从路由router里面得到组件的title 在 router.beforeEach((

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

1. 实现思路

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

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

( 3 ) 设置 title

（1）从路由router里面得到组件的title

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

（ 2 ) title存vuex

{ state.browserHeaderTitle = action.browserHeaderTitle }

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

( 3 ) 设置 title

我们在路由after后设置title

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!