Vue項目添加動態瀏覽器頭部title

時間 2019-12-06

標籤 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) => {} 裏面vue

const browserHeaderTitle = to.name

（ 2 ) title存vuex

SET_BROWSERHEADERTITLE: (state, action) => {
      state.browserHeaderTitle = action.browserHeaderTitle
    }

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

( 3 ) 設置 title

咱們在路由after後設置titlegit

/**
 * 設置瀏覽器頭部標題
 */
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)
})