設(shè)置vue動(dòng)態(tài)瀏覽器標(biāo)題的方法有哪些，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),橋西企業(yè)網(wǎng)站建設(shè),橋西品牌網(wǎng)站建設(shè),網(wǎng)站定制,橋西網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,橋西網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

本篇文章給大家?guī)砹岁P(guān)于怎樣利用vue來實(shí)現(xiàn)動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的效果，希望對大家有幫助。

vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題

平時(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)目
  
 //單語言項(xiàng)目
  

完活

筆記

注意：值根據(jù)自己項(xiàng)目路由結(jié)構(gòu)來，本demo用的是name值，i18n有對應(yīng)語言包，
你可以在meta對象里加個(gè)title屬性，在外面用to.meta.title即可

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。