Vueの中でtitleの動的な修正問題について話します。

以前のVueプロジェクトのパッケージの成果物は集積プラットフォームに組み込まれていますので、プロジェクトのtitleには関心がありませんでした。最近になって、急に需要があります。ボタンをクリックして、集積プラットフォームの外新でページを開きたいです。この時、私はやっと気づきました。私のプロジェクトのtitleは万年不変のvue-projectです。当然、この問題はテストされました。お父さんは大きな欠陥を持っています。
間違いを犯した私はすぐにこの問題を解決しますが、しばらくの間の模索を経て、この小さな問題には多くの違いがあることを発見しました。
まず、間違いなく、document.title方法を使ってDOM操作でtitleの値を修正するべきです。この時、問題解決までにはまだ二歩の差があります。
1.titleはどうやって伝えますか？
2.titleはいつ修正しますか？
ps：多くの人が微信または一部のIOS webview（以下、WeChatで指す）では、document.title法によってtitleの値を修正できないと言っていますが、この問題の解決策は文末のタマゴの中で言及されます。
titleの転送
次に第一のポイントに入ります。titleの伝達です。転送title値の方式によって、2つの方式に分けられる。
1.グローバル変数転送
2.ルート転送
グローバル変数転送とは？グローバル変数転送とは、すべてのページが同じグローバル変数を維持し、ページを切り替えて、その再割り当てに対して最も一般的な方法はVuexを使用することです。もちろん、thisを使用するならば、rootはprovide/injectを使っても同様の効果を達成することができます。
ルーティング転送の方法は、ルーティング・ジャンプを介してtitleの値を転送するということが分かりやすくなります。トラフィックロジックには多くのルートの参照が含まれていますので、その後のメンテナンスを容易にするために、titleの値をルーティング構成のmetaを介して転送することを推奨します。
その後、現在のルーティングオブジェクト（$route）のmeta属性にアクセスすることで、title値を取得することができます。

// router.js
const routes = [
 {
  path: '/',
  ...
  meta: {
   title: '  '
  }
 }, {
  path: '/A',
  meta: {
   title: 'A  '
  }
 }
]
//     ，   title
...
beforeCreate () {
 console.log(this.$route.meta)
}
...

上記の2つの方法により、titleの値をスムーズに伝えることができます。
titleの修正タイミング
title値の転送が完了しました。次にいつ修正するべきかを話します。
この問題を考えると、多くの人が一番最初に思い付いたのはライフサイクルフックの中でtitleを修正することです。
ライフサイクルフック
一般的に、私たちはmountedライフサイクルフックに初期化要求を行います。だから、慣性思惟の下で、私はmountedでtitleの修正を行いました。

//     
mounted () {
 document.title = this.$route.meta.title
}

結果として、効果が良くなく、タブページのtitleが1秒以上遅れて修正されました。この遅延により、明らかにコードの実行が遅すぎます。
Vueソースの初期化に関するコードの詳細を思い出します。私たちはbeforeCreateフックの中でもtitleの修正が可能であることを発見できます。
変更後のコードは以下の通りです。

//     
beforeCreate () {
 document.title = this.$route.meta.title
}

修正後のコードの効果は明らかによくなりました。遅延感はまだありますが、もうあまりはっきりしていません。
ルートガード
ライフサイクルフックの中でtitle値を修正するよりも、ルーティング・ジャンプ時にルーティング・ガードを利用してtitleの修正を完了するのが良いのではないでしょうか？ルーティング・ジャンプはライフサイクル関数が実行される前に発生するので、ルーティング・ガードを使用してtitle値を修正すると、title修正の遅延が著しく低減される。

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

この時、私達はほぼ完璧に機能の需要を完成しました。しかし、まだ少しの傷があります。もしmetaの中にtitle値が定義されていないなら、その時title値はundefinedになり、街を飛びます。
したがって、私たちはデフォルトのtitle値（一般的にはこのプロジェクトの名前とすることができます）を設定して、title値が存在しない時のスペアタイヤとしてください。修正後のコードは以下の通りです。

// router.js
const defaultTitle = '   title'
router.beforeEach((to, from, next) => {
 document.title = to.meta.title ? to.meta.title : defaultTitle
 next()
})

ここまでのところ，需要を完全に実現し，この機能とトラヒックコードの結合を実現した。
カラーエッグ1：vue-metaを使って管理するtitle
vue-metaプラグインをインストールする時、Vuexのように、グローバル状態――meta Infoを注入します。metaInfoオブジェクトのtitle属性を定義することにより、titleの動的な修正ができます。
カラーエッグ2:vue-wechat-titleソース解析
関連資料を検索する時、vue-wechat-titleのこのカバンの出現頻度は意外に高いです。このカバンは主に前述の問題を解決しました。マイクロメールではdocument.titleの方法でtitleの値を修正できません。もちろん、この互換性の問題は全部解決できます。普通の状況でのtitle修正はもちろんです。
まず、vue-wechat-titleのソースコードを見に来ました。

// vue-wechat-title   
(function () {
 //       
 function install (Vue) {
  var setWechatTitle = function (title, img) {
   if (title === undefined || window.document.title === title) {
    return
   }
   //    title
   document.title = title
   var mobile = navigator.userAgent.toLowerCase()
   //      
   if (/iphone|ipad|ipod/.test(mobile)) {
    //      iframe，   onload   
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    //      favicon                
    iframe.setAttribute('src', img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
    // onload     
    var iframeCallback = function () {
     setTimeout(function () {
      //     
      iframe.removeEventListener('load', iframeCallback)
      document.body.removeChild(iframe)
     }, 0)
    }
    //     
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
   }
  }
  //       ，
  Vue.directive('wechat-title', function (el, binding) {
   // update   ，   title     
   setWechatTitle(binding.value, el.getAttribute('img-set') || null)
  })
 }

 if (typeof exports === 'object') {
  module.exports = install
 } else if (typeof define === 'function' && define.amd) {
  define([], function () {
   return install
  })
 } else if (window.Vue) {
  Vue.use(install)
 }
})()

WeChatブラウザはオンラインイベントでtitleの値だけでタイトルを初期化していますが、その後のtitleの修正は、タイトルの修正をトリガすることができません。オンラインイベントはタイトルをtitleで修正することができますので、空いているiframeトリガonloadイベントを作成してタイトルを修正したら削除します。このようにtitleに基づいてタイトルを修正し、ページに追加の影響を与えませんでした。
ご存知のように、vue-wechat-title はv-wechat-title コマンドによってtitleの動的な修正をトリガし、コマンドの値が修正されるたびに、udateフックの中のコールバック関数――setWechatTitleをトリガする。この関数は前述の互換性処理により、document.title ペアのタイトルの修正を達成した。
締め括りをつける
以上は小编が皆さんに绍介したVue中titleの动态修正问题です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。