Vueでブラウザタイトルを動的に設定する方法の詳細な説明

ナンセンス

通常、ブラウザのタイトルは次のように設定されます

しかし、Vue はシングルページ アプリケーションであり、エントリ ファイルには HTML が 1 つしかないため、設定できるタグは 1 つだけです。そこで、ブラウザー タグを動的に設定するためによく使用される 2 つの方法を紹介します。

文章

最初

ブラウザのネイティブメソッドdocument.titleを使用する

ルーター/index.js

router.beforeEach

// 多言語プロジェクトの場合は、独自のプロジェクトに応じて '@/i18n/index' から i18n をインポートします。
 document.title = i18n.t("ルーター." + to.name)
 //単一言語プロジェクト document.title = to.name

言語切り替えルートは変更されていないため、これも追加する必要があります。単一言語プロジェクトでは必要ありません。

//多言語プロジェクト document.title = i18n.t("router." + to.name)

完了、推奨、ネイティブ互換性は良好、他の依存パッケージをダウンロードしてインストールする必要はありません

2番目

プラグインの使用

1. プラグインをインストールする

npm インストール vue-wechat-title --save

2.main.js リファレンス

import VueWechatTitle from 'vue-wechat-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>

終了した

ノート

注:値は、独自のプロジェクトのルーティング構造によって異なります。このデモでは、name 値を使用します。i18n には対応する言語パッケージがあります。

meta オブジェクトに title 属性を追加し、その外部でto.meta.titleを使用できます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。