vue 動態設置瀏覽器標題的方法詳解

Posted on by

廢話

平時設置瀏覽器標題是這樣的

但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即可

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：