如何在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)
})

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決vue mui中mui-silder外掛程式失效了不能拖曳的問題

如何讓vue的axios元件和PHP後端交換資料

以上是如何在Vue專案中新增動態瀏覽器頭部title的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！