Vueプロジェクトに動的ブラウザヘッダータイトルを追加する方法

不言
リリース: 2018-07-10 17:03:45
オリジナル
2584 人が閲覧しました

この記事では主に、Vue プロジェクトに動的ブラウザ ヘッダー タイトルを追加する方法について説明します。必要な友達はそれを参照できるようになります

0。

Vueプロジェクトは動的ブラウザヘッダータイトルを追加します

Vueプロジェクトに動的ブラウザヘッダータイトルを追加する方法

Vueプロジェクトに動的ブラウザヘッダータイトルを追加する方法

1.実装アイデア

  • (1)ルーティングルーターからコンポーネントのタイトルを取得します

  • (2)タイトルをvuexに保存しますこのプロジェクトは h5 の sessionStorage と localStorage をカプセル化しており、ここに保存することもできます)

  • ( 3 ) タイトルの設定

(1)

const browserHeaderTitle = to.name
ログイン後にコピー

内の router.beforeEach((to, from, next) => {} のルーティングルーター

からコンポーネントのタイトルを取得します ( 2 ) vuexにタイトルを保存します

 SET_BROWSERHEADERTITLE: (state, action) => {
      state.browserHeaderTitle = action.browserHeaderTitle
    }

 store.commit('SET_BROWSERHEADERTITLE', {
      browserHeaderTitle: browserHeaderTitle
    })
ログイン後にコピー

(3) タイトルを設定します

ルーティング後にタイトルを設定します

/**
 * 设置浏览器头部标题
 */
export const setTitle = function(title) {
  title = title ? `${title}` : 'NxAdmin'
  window.document.title = title
}

router.afterEach(() => {
  NProgress.done() // 结束Progress
  setTimeout(() => {
    const browserHeaderTitle = store.getters.browserHeaderTitle
    setTitle(browserHeaderTitle)
  }, 0)
})
ログイン後にコピー

以上がこの記事の全内容です。 PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

以上がVueプロジェクトに動的ブラウザヘッダータイトルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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