本篇文章給大家帶來了關于怎樣利用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即可

【
站長資訊網