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

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

0。

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+mui の mui-silder プラグインが無効でドラッグ アンド ドロップできない問題を解決する方法

vue の axios コンポーネントと PHP バックエンドにデータを交換させる方法

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