vue 動態(tài)設(shè)置瀏覽器標題的方法詳解
更新時間：2021年12月26日 16:35:58 作者：郭順杰
這篇文章主要為大家介紹了vue動態(tài)設(shè)置瀏覽器標題的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
廢話
平時設(shè)置瀏覽器標題是這樣的
但vue是單頁面應(yīng)用，入口文件也只有一個html，只能設(shè)置一個標簽，所以下面介紹兩種常用的動態(tài)設(shè)置瀏覽器標簽的方法
正文
第一種
使用瀏覽器原生方法 document.title
router/index.js
router.beforeEach里
//多語言項目，根根據(jù)自己項目來
import i18n from '@/i18n/index';
document.title = i18n.t("router." + to.name)
//單語言項目
document.title = to.name
語言切換路由不變，所以也要加一下，單語言項目不用
//多語言項目
document.title = i18n.t("router." + to.name)
完活，推薦使用，原生兼容性好，不用下載安裝其他依賴包
第二種
使用插件
1.安裝插件
npm install vue-wechat-title --save
2.main.js 引用
import VueWechatTitle from 'vue-wechat-title'//動態(tài)修改title Vue.use(VueWechatTitle)
3.添加指令
//多語言項目
<router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
//單語言項目
<router-view v-wechat-title=" $route.name" ></router-view>
完活
筆記
注意：值根據(jù)自己項目路由結(jié)構(gòu)來，本demo用的是name值，i18n有對應(yīng)語言包，
你可以在meta對象里加個title屬性，在外面用to.meta.title即可
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家介紹了Vue如何實現(xiàn)字母驗證碼詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件）
這篇文章主要介紹了vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
el-select如何獲取下拉框選中l(wèi)abel和value的值
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務(wù)場景需要同時獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下2022-10-10
vue?mounted周期中document.querySelectorAll()獲取不到元素的解決
這篇文章主要介紹了vue?mounted周期中document.querySelectorAll()獲取不到元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)
本文以校驗兩次密碼的一致性應(yīng)用，給出兩個可變屬性值的字段之間的聯(lián)合校驗的典型解決方案，通過實例代碼給大家介紹Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)，需要的朋友一起看看吧2021-07-07
詳解Vue.js iview實現(xiàn)樹形權(quán)限表（可擴展表）
這篇文章主要介紹了詳解Vue.js iview實現(xiàn)樹形權(quán)限表（可擴展表），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了vue-awesome-swiper滑塊插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04