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

本篇文章給大家分享的是有關(guān)vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

廢話

平時(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即可

以上就是vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法是什么，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。