Vue項目添加動態(tài)瀏覽器頭部title

crossoverJie 發(fā)布于2019-08-30 15:54 / 641人閱讀

摘要：直接上預(yù)覽鏈接效果圖項目添加動態(tài)瀏覽器頭部實現(xiàn)思路從路由里面得到組件的存本項目已經(jīng)封裝的和也可以存在這里面設(shè)置從路由里面得到組件的在里面存設(shè)置我們在路由后設(shè)置設(shè)置瀏覽器頭部標(biāo)題結(jié)束源碼地址前端學(xué)習(xí)交流群，美女多多。

0. 直接上預(yù)覽鏈接 + 效果圖

1. 實現(xiàn)思路

( 1 ) 從路由router里面得到組件的title

( 2 ) title存vuex （本項目已經(jīng)封裝h5的sessionStorage和localStorage也可以存在這里面）

( 3 ) 設(shè)置 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 ) 設(shè)置 title

我們在路由after后設(shè)置title

/**
 * 設(shè)置瀏覽器頭部標(biāo)題
 */
export const setTitle = function(title) {
  title = title ? `${title}` : "NxAdmin"
  window.document.title = title
}

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

源碼地址 前端學(xué)習(xí)交流群493671066，美女多多。老司機(jī)快上車，來不及解釋了。 作者相關(guān)Vue文章

基于Vue2.0實現(xiàn)后臺系統(tǒng)權(quán)限控制

前端文檔匯總

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

打賞衷心的表示感謝

云服務(wù)器 GPU云服務(wù)器云服務(wù)器搭建vue項目騰訊云服務(wù)器部署vue項目 vue項目放到云服務(wù)器上阿里云服務(wù)器搭建vue項目

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116845.html

相關(guān)文章

Nuxt.js 基礎(chǔ)入門教程

摘要：原文鏈接開發(fā)一個單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會了，但是單頁面應(yīng)用有一個致命的缺點(diǎn)，就是極不友好?；谒覀兛梢钥焖匍_發(fā)一個基于的單頁面應(yīng)用。只有數(shù)據(jù)流存在相關(guān)配置時可用。引入后，所有頁面均有效。原文鏈接 Vue 開發(fā)一個單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會了，但是單頁面應(yīng)用有一個致命的缺點(diǎn)，就是 SEO 極不友好。除非，vue 能在服務(wù)端渲染（ssr）并直接返回已經(jīng)渲...

yedf 2019-08-26 11:37 評論0 收藏0
vue 服務(wù)器端渲染 nuxt.js初探

摘要：在調(diào)研插件后，發(fā)現(xiàn)無法滿足以及等要求時，果斷選用了做服務(wù)器渲染。布局目錄該目錄名為保留的，不可更改。服務(wù)器啟動的時候，該目錄下的文件會映射至應(yīng)用的根路徑下。它可以在服務(wù)端或路由更新之前被調(diào)用?？捎糜谥付ǚ?wù)端返回的請求狀態(tài)碼。開頭還是來一段廢話：年關(guān)將近，給大家拜個早年，愿大家年會都能抽大獎，來年行大運(yùn)。廢話不多說，直接進(jìn)正文項目環(huán)境：前端vue項目，需要將新增的幾個路由頁...

bingchen 2019-08-23 14:53 評論0 收藏0
Web前端開發(fā)標(biāo)準(zhǔn)規(guī)范

摘要：頁面名稱月影功能模塊，請在模塊之間加入注釋，中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結(jié)束自定義函數(shù)。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義提高團(tuán)隊的協(xié)作能力提高代碼的復(fù)用利用率可以寫出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項目、目錄、html/css/js等文件命名全...

高璐 2019-08-30 15:55 評論0 收藏0
Web前端開發(fā)標(biāo)準(zhǔn)規(guī)范

摘要：頁面名稱月影功能模塊，請在模塊之間加入注釋，中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結(jié)束自定義函數(shù)。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義提高團(tuán)隊的協(xié)作能力提高代碼的復(fù)用利用率可以寫出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項目、目錄、html/css/js等文件命名全...

GHOST_349178 2019-08-23 15:17 評論0 收藏0
Web前端開發(fā)標(biāo)準(zhǔn)規(guī)范

摘要：頁面名稱月影功能模塊，請在模塊之間加入注釋，中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結(jié)束自定義函數(shù)。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義提高團(tuán)隊的協(xié)作能力提高代碼的復(fù)用利用率可以寫出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項目、目錄、html/css/js等文件命名全...

newtrek 2019-08-02 14:16 評論0 收藏0