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

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

1. 实现思路

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

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

( 3 ) 设置

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

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

const browserHeader  = to.name

( 2 ) 存vuex

 SET_BROWSERHEADER : (state, action) => {
  state.browserHeader  = action.browserHeader 
 }

 store.commit('SET_BROWSERHEADER ', {
  browserHeader : browserHeader 
 })

( 3 ) 设置

我们在路由after后设置

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

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

源码地址

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

收藏 打印