目錄

• 廢話
• 正文
• 第一種
• router/index.
  
• 第二種
• 1.安裝外掛
• 2.main.js 引用
• 3.新增指令
• 筆記
• 總結

廢話

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

但是單頁面應用，入口檔案也只有一個html，只能設定一個標籤，所以下面介紹兩種常用的動態設定瀏覽器標籤的方法

正文

第一種

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

router/index.js

router.beforeEach裡

//多語言專案，根根據自己專案來
 import i18n from '@/i18n/index';
 document.title = i18n.t("router." +rotnnelaKb 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)" ></routrotnnelaKb
 
er-view>
 //單語言專案
  <router-view v-wechat-title=" $route.name" ></router-view>

完活

筆記

注意：值根據自己專案路由結構來，本demo用的是name值，i1rotnnelaKb8n有對應語言包，

你可以在meta物件里加個title屬性，在外面用to.meta.title即可

總結

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