Vue項目添加動態(tài)瀏覽器頭部title的方法
更新時間：2018年07月11日 10:02:12 作者：敏哥
這篇文章主要介紹了Vue項目添加動態(tài)瀏覽器頭部title的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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è)置瀏覽器頭部標題
*/
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)
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue 2.8.2版本配置剛進入時候的默認頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能示例代碼
這篇文章主要介紹了vue?elementui?實現(xiàn)圖片上傳后拖拽排序功能,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
Vuejs入門教程之Vue生命周期，數(shù)據(jù)，手動掛載，指令，過濾器
本篇文章主要介紹了Vuejs入門教程之Vue生命周期，數(shù)據(jù)，手動掛載，指令，過濾器的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能
這篇文章主要介紹了vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2018-04-04
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解
今天小編就為大家分享一篇vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
所謂虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計出來的。如前，若一次操作中有 10 次更新 這篇文章主要給大家介紹了關(guān)于Vue源碼分析之虛擬DOM的相關(guān)資料,需要的朋友可以參考下2021-05-05
本文通過實例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下2023-04-04