vue.jsでページタイトルを変更する方法

vue.js でページ タイトルを変更する方法: 1. ルーティング ファイルindex.js 内の必要なルートにタイトルを追加します; 2. ルートの beforeEach インターセプターで処理します。

#この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター。

Web ページを開くと、Web ページにはデフォルトのタイトルが設定されます。別のページ コンテンツを読み込むときは、タイトルを変更する必要があります (ホーム ページから詳細ページ、次にページからなど)。詳細ページからパーソナルセンターなどへ

vue には Web ページのタイトルを変更する方法がたくさんありますが、ここでは 2 つのオプションを紹介します。

オプション 1 (推奨されません):

ビジネスと組み合わせて作成された Vue ライフサイクル関数で、document.title に値を直接割り当てます。

<script>
import axios from &#39;axios&#39;
export default {
  created () {
    document.title = &#39;功能授权&#39;
  }
}
</script>

オプション 2 では、Vue-Router の beforeEach interception を使用します

Vue Router がプロジェクトで使用され、タイトルがルーティング ファイルindex.js 内の必要なルートに追加されます。

routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        title: '首页',
        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
  }
})

推奨学習:

php training

以上がvue.jsでページタイトルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。