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)
})

源碼地址

前端學習交流羣493671066，美女多多。老司機快上車，來不及解釋了。

作者相關Vue文章

基於Vue2.0實現後臺系統權限控制

前端文檔彙總

VUE2.0增刪改查附編輯添加model(彈框)組件共用

打賞 衷心的表示感謝