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

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

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

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

1. 實(shí)現(xiàn)思路

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

( 2 ) title存vuex （本項(xiàng)目已經(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

我們?cè)诼酚蒩fter后設(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ī)快上車(chē)，來(lái)不及解釋了。 作者相關(guān)Vue文章

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

前端文檔匯總

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

打賞衷心的表示感謝

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116845.html

相關(guān)文章

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

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

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

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

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

摘要：頁(yè)面名稱(chēng)月影功能模塊，請(qǐng)?jiān)谀K之間加入注釋?zhuān)杏⑽牟蛔鲆蠡顒?dòng)規(guī)則開(kāi)始活動(dòng)規(guī)則活動(dòng)規(guī)則結(jié)束自定義函數(shù)。參考頁(yè)面前端規(guī)范 web前端開(kāi)發(fā)規(guī)范的意義提高團(tuán)隊(duì)的協(xié)作能力提高代碼的復(fù)用利用率可以寫(xiě)出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語(yǔ)義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項(xiàng)目、目錄、html/css/js等文件命名全...

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

摘要：頁(yè)面名稱(chēng)月影功能模塊，請(qǐng)?jiān)谀K之間加入注釋?zhuān)杏⑽牟蛔鲆蠡顒?dòng)規(guī)則開(kāi)始活動(dòng)規(guī)則活動(dòng)規(guī)則結(jié)束自定義函數(shù)。參考頁(yè)面前端規(guī)范 web前端開(kāi)發(fā)規(guī)范的意義提高團(tuán)隊(duì)的協(xié)作能力提高代碼的復(fù)用利用率可以寫(xiě)出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語(yǔ)義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項(xiàng)目、目錄、html/css/js等文件命名全...

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

摘要：頁(yè)面名稱(chēng)月影功能模塊，請(qǐng)?jiān)谀K之間加入注釋?zhuān)杏⑽牟蛔鲆蠡顒?dòng)規(guī)則開(kāi)始活動(dòng)規(guī)則活動(dòng)規(guī)則結(jié)束自定義函數(shù)。參考頁(yè)面前端規(guī)范 web前端開(kāi)發(fā)規(guī)范的意義提高團(tuán)隊(duì)的協(xié)作能力提高代碼的復(fù)用利用率可以寫(xiě)出質(zhì)量更高，效率更好的代碼為后期維護(hù)提供更好的支持一、命名規(guī)則命名使用英文語(yǔ)義化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！項(xiàng)目、目錄、html/css/js等文件命名全...

newtrek 2019-08-02 14:16 評(píng)論0 收藏0