本篇文章給大家帶來了關于怎樣利用vue來實現動態設置瀏覽器標題的效果，希望對大家有幫助。

vue 動態設置瀏覽器標題

平時設置瀏覽器標題如下圖所示：

但vue是單頁面應用，入口文件也只有一個html，只能設置一個標簽，所以下面介紹兩種常用的動態設置瀏覽器標簽的方法

正文

第一種

使用瀏覽器原生方法 document.title

router/index.js
router.beforeEach里

//多語言項目，根根據自己項目來  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'//動態修改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>

完活

筆記

注意：值根據自己項目路由結構來，本demo用的是name值，i18n有對應語言包，
你可以在meta對象里加個title屬性，在外面用to.meta.title即可

【