vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法詳解
更新時(shí)間：2021年12月26日 16:35:58 作者：郭順杰
這篇文章主要為大家介紹了vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
廢話
平時(shí)設(shè)置瀏覽器標(biāo)題是這樣的
但vue是單頁面應(yīng)用，入口文件也只有一個(gè)html，只能設(shè)置一個(gè)標(biāo)簽，所以下面介紹兩種常用的動(dòng)態(tài)設(shè)置瀏覽器標(biāo)簽的方法
正文
第一種
使用瀏覽器原生方法 document.title
router/index.js
router.beforeEach里
//多語言項(xiàng)目，根根據(jù)自己項(xiàng)目來
import i18n from '@/i18n/index';
document.title = i18n.t("router." + to.name)
//單語言項(xiàng)目
document.title = to.name
語言切換路由不變，所以也要加一下，單語言項(xiàng)目不用
//多語言項(xiàng)目
document.title = i18n.t("router." + to.name)
完活，推薦使用，原生兼容性好，不用下載安裝其他依賴包
第二種
使用插件
1.安裝插件
npm install vue-wechat-title --save
2.main.js 引用
import VueWechatTitle from 'vue-wechat-title'//動(dòng)態(tài)修改title Vue.use(VueWechatTitle)
3.添加指令
//多語言項(xiàng)目
<router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
//單語言項(xiàng)目
<router-view v-wechat-title=" $route.name" ></router-view>
完活
筆記
注意：值根據(jù)自己項(xiàng)目路由結(jié)構(gòu)來，本demo用的是name值，i18n有對應(yīng)語言包，
你可以在meta對象里加個(gè)title屬性，在外面用to.meta.title即可
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪
這篇文章主要為大家詳細(xì)介紹了Vue使用Vue-cropper實(shí)現(xiàn)圖片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
淺談vue項(xiàng)目用到的mock數(shù)據(jù)接口的兩種方式
這篇文章主要介紹了淺談vue項(xiàng)目用到的mock數(shù)據(jù)接口的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue實(shí)現(xiàn)Layui的集成方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇解決vue打包c(diǎn)ss文件中背景圖片的路徑問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例
本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹了VUE中Non-Props屬性的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
前端插件庫之vue3使用vue-codemirror插件的步驟和實(shí)例
CodeMirror是一款基于JavaScript、面向語言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫之vue3使用vue-codemirror插件的步驟和實(shí)例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
基于vue實(shí)現(xiàn)多功能樹形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過獨(dú)特的樣式巧妙處理不同層級,為用戶打造豐富的視覺盛宴,文中通過代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02