vuejsでタイトルを設定する方法

vuejs でタイトルを設定する方法: 1. npm install を通じて「vue-wechat-title」をインストールします; 2. main.js に「vue-wechat-title」を導入します; 3. それをindex.js に追加します各ルートにタイトルを追加するだけです。

この記事の動作環境: Windows 7 システム、Vue バージョン 2.9.6、Dell G3 コンピューター。

vuejs でタイトルを設定するにはどうすればよいですか?

#vue 単一ページのタイトル設定 title

#Vue、React

などのフロントエンド フレームワークはシングルページ アプリケーションであり、実際には Web サイト全体がインデックス ページであり、ページ ジャンプによってindex.html のコンテンツが置き換えられます。これは、各ページにタイトル タグを設定する従来の方法とは異なります。

vue-wechat-title の使用をお勧めします

vue-wechat-title 関数

Vuejs のシングルページ アプリケーションは、Web ビューでタイトルを渡すことができません。 iOS システム上の一部の APP このプラグインは、document.title = xxx (Android と互換性あり) を変更することによってのみこの問題を解決するように設計されています。

テスト済みの APP

WeChat

QQ
Alipay
Taobao

インストール

npm install vue-wechat-title --save

使用法

1、ルーティング ファイルの

main.js

に <pre class="brush:php;toolbar:false;">import VueWechatTitle from &amp;#39;vue-wechat-title&amp;#39;Vue.use(VueWechatTitle)</pre>2 を導入します

index.js

title<pre class="brush:php;toolbar:false;">// 挂载路由const router = new Router({ mode: &amp;#39;history&amp;#39;, routes:[ { path: &amp;#39;/&amp;#39;, name: &amp;#39;Index&amp;#39;, component: Index, meta: { title: &amp;#39;首页&amp;#39; // 标题设置 } }, { path: &amp;#39;/lists&amp;#39;, name: &amp;#39;Lists&amp;#39;, component: Lists, meta: { title: &amp;#39;列表&amp;#39; // 标题设置 } } ] });</pre>3 を各ルートに追加し、

の

router-view コンポーネント

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

を変更します。 app.vue カスタムで読み込まれた画像のデフォルトのアドレスは ./favicon.ico で、相対または絶対のアドレスにすることができます

<p v-wechat-title="$route.meta.title" img-set="/static/logo.png"></p>

ok!再起動して見てください。

推奨される学習: 「

vue チュートリアル

」

以上がvuejsでタイトルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。