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

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

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

0. 直接上預覽鏈接 + 效果圖

1. 實現(xiàn)思路

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

( 2 ) title存vuex （本項目已經(jīng)封裝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實現(xiàn)后臺系統(tǒng)權限控制

前端文檔匯總

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

打賞衷心的表示感謝

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/116845.html

Nuxt.js 基礎入門教程

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

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

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

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

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

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

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

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

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

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