設(shè)置vue動(dòng)態(tài)瀏覽器標(biāo)題的方法有哪些

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

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

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)目
  <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有對(duì)應(yīng)語言包，
你可以在meta對(duì)象里加個(gè)title屬性，在外面用to.meta.title即可

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