Vue動態的にホームページのタイトルを修正する方法と問題が発生しました。

業務の需要、ページに入る時、ウェブページにはデフォルトのタイトルがあります。ページの内容は違っています。タイトルは変更が必要です。例：機能の授権、機能の授権（張三）。
Vueの下には多くの方法でホームページのタイトルを修正しています。ここでこの問題を解決するいくつかの案をまとめてみます。
一、最も愚かな方案
業務を結び付けて直接Vueライフサイクル関数createdとmountedの中で、document.titleに価値を与えます。

<script>
import axios from 'axios'
export default {
 created () {
 document.title = '    '
 },
 mounted() {
 axios.get('***').then((d)=>{
 document.title = '    ('+ d.Name + ')'
 })
 }
}
</script>

二、一般案では、Vue-RouterのbeforeEachでブロックします。
プロジェクトではVue Routerを使用して、ルーティングファイルindex.jsに必要なルートにtitleを追加します。

routes: [{
 path: '/',
 name: 'home',
 component: () => import('@/pages/home/index'),
 meta:{
 keepAlive: true
 }
 },
 {
 path: '/person/auth,
 name: 'personAuth',
 component: () => import('@/pages/person/auth),
 meta:{
 title: '    ',
 keepAlive: false
 }
 }
 ]

ルートのbeforeEachスクリーンで処理します。

router.beforeEach((to, from, next) => {
 /*           title */
 if (to.meta.title) {
 document.title = to.meta.title
 }
})

ページ上でロードされた内容によってtitleを変更したい場合は、メソッド1のmounted関数処理ロジックを参照してください。
三、エレガントな方案で、Vueカスタムコマンド（directive）を使用する
前に述べたように、ページが異なるデータ状態を取得する場合は、異なるタイトルを表示する必要があります。Vueカスタムコマンドに合わせて、よりエレガントにウェブページのタイトルを処理することができます。
カスタムコマンドv-web-titleの定義

export default {
 inserted: function (el, binding) {
 const { value } = binding
 if (el.dataset.title) { //   1，      data-title     
 document.title = el.dataset.title
 } else if (value && value.title) { //   2，    
 document.title = value.title
 }
 },
 update (el, binding, vnode, oldVnode) {
 const { value } = binding
 if (el.dataset.title) {
 document.title = el.dataset.title
 } else if (value && value.title) {
 document.title = value.title
 }
 }
}

ページでv-web-titleを使うには2つの方法があります。
1.タグdata-title属性に値を付ける

<template>
 <div v-web-title
 :data-title="textTitle">
</template>
<script>
import axios from 'axios'
export default {
 data(){
 return {
 textTitle:'    '
 }
 },
 mounted () {
 axios.get('***').then((d) => {
 this.textTitle = '    (' + d.Name + ')'
 })
 }
}
</script>

2.指令に参加する

<template>
 <div v-web-title="{title:textTitle}">
</template>
<script>
import axios from 'axios'
export default {
 data(){
 return {
 textTitle:'    '
 }
 },
 mounted () {
 axios.get('***').then((d) => {
 this.textTitle = '    (' + d.Name + ')'
 })
 }
}
</script>

四、参考
1.vue単一ページのアプリケーションで、動的にtitleを修正します。は主にvue-weachat-titleコンポーネントを使用することを紹介します。
2.vue.jsカスタムコマンド詳細は主にカスタムコマンドのフック関数とコマンドの参照などを紹介します。
締め括りをつける
上记は小编が皆さんに绍介したVue动态的にホームページのタイトルを修正する方法と问题があったら、皆さんに助けてほしいです。