Vue はブラウザのアイコンとタイトルを動的に変更します

プロジェクトには通常、ブラウザ アイコンがカスタマイズされ、ブラウザ タイトルの表示が現在のメニューであるという要件があります。
現時点では、この効果を実現するにはブラウザのタイトルを動的に設定する必要があります。

1. ブラウザのアイコンを変更する

プロジェクト内で次のファイルを見つけて
ここに画像の説明を挿入
、ファイル内のパターンを表示したいパターンに置き換えます。

2. ブラウザのタイトルを動的に変更する

1. プラグインをインストールします。
npm vue-wechat-title --save
または
npm install --save vue-wechat-title
、上記の 2 つのコマンドが失敗した場合は、失敗のプロンプトに従ってインストールします。

2. main.jsにプラグインを導入します
import VueWechatTitle from 'vue-wechat-title' //动态修改浏览器标题
Vue.use(VueWechatTitle)

3. ルート内の「meta」にタイトルを追加・変更する

routes: [{
   path: '/login',
   component: Login,
   meta: {
    title: '登录'
   }
  },
  {
   path: '/homePage',
   component: homePage,
   meta: {
    title: '首页'
   }

4. App.vueにv-wechat-titleを追加します
<router-view v-wechat-title='$route.meta.title' />

おすすめ

転載: blog.csdn.net/weixin_45489658/article/details/115918426