ホームページ > ウェブフロントエンド > Vue.js > vuejsでタイトルを設定する方法

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

藏色散人
リリース: 2023-01-13 00:45:39
オリジナル
4048 人が閲覧しました

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

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

この記事の動作環境: 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

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">import VueWechatTitle from &amp;#39;vue-wechat-title&amp;#39;Vue.use(VueWechatTitle)</pre><div class="contentsignin">ログイン後にコピー</div></div>2 を導入します

index.js

title<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート