vue単一ページのアプリケーションで、動的にtitleを修正する問題を解決します。
1768 ワード
詳細はvue-weachat-titleです。
問題を解決する:
1、Vuejs単一ページはiOSシステムの下で一部のAPPのwebviewに適用されます。タイトルはdocument.title=xxxの方式で修正できません。このプラグインはこの問題を解決するためだけに生まれます。
2、vue単一ページでは、ブラウザを通じてQQ、WeChatなどのアプリケーションへのリンクを共有しています。トップページのタイトルとデフォルトのicon画像だけです。
すでにテストしました:APPのWeChat QQは宝を支払って宝を洗います。
インストール
1、main.jsに導入する
各コンポーネントのどちらのラベルにも書き込み可能です。
詳細ページでは、文章の内容によって、文章のタイトルと画像が異なります。
以上述べたのは小编が皆さんに绍介したvue単一ページの応用における动态的な修正title问题です。皆さんに助けてほしいです。
問題を解決する:
1、Vuejs単一ページはiOSシステムの下で一部のAPPのwebviewに適用されます。タイトルはdocument.title=xxxの方式で修正できません。このプラグインはこの問題を解決するためだけに生まれます。
2、vue単一ページでは、ブラウザを通じてQQ、WeChatなどのアプリケーションへのリンクを共有しています。トップページのタイトルとデフォルトのicon画像だけです。
すでにテストしました:APPのWeChat QQは宝を支払って宝を洗います。
インストール
npm install vue-wechat-title --save
使い方1、main.jsに導入する
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
2、ルーティングファイルindex.jsで必要なルートにtitleを追加する。
routes: [{
path: '/',
name: 'JmCon',
component: JmCon,
meta:{
keepAlive: true
}
}, {
path: '/detail',
name: 'TopicDetail',
component: TopicDetail,
meta:{
title: ' ',
keepAlive: false
}
}
]
3、app.vueでrouter-viewのコンポーネントを修正する各コンポーネントのどちらのラベルにも書き込み可能です。
<div v-wechat-title="$route.meta.title"></div>
または<router-view v-wechat-title='$route.meta.title'></router-view>
title値を動的に変更したい場合:<div v-wechat-title="$route.meta.title={data.title}"></div>
カスタムローディングの画像アドレスはデフォルトでは./favicon.icoは相対的または絶対的であり得る。<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
まとめ:詳細ページでは、文章の内容によって、文章のタイトルと画像が異なります。
<div class="topicdetail" v-wechat-title="$route.meta.title=topicinfo.subject" img-set="top
締め括りをつける以上述べたのは小编が皆さんに绍介したvue単一ページの応用における动态的な修正title问题です。皆さんに助けてほしいです。