Vue-ブラウザtitleを動的に変更

1034 ワード

ステップ1:Vueのルーティングファイルrouterを見つけます.js(vue 2.0 routerディレクトリ下index.js)
赤いワイヤフレーム内のコードを、const router=new Router({})に変更します.次の図に示します.
変更前:
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/Register'
    }
]

 
変更後:
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/Register'
    }
]

 
ステップ2:ルーティング・ファイルの一番下に次のコードを追加します.
//         
router.beforeEach((to, from, next) => {
  /*           title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
export default router

ステップ3:タイトルを設定するルーティング項目にmetaオブジェクトを追加します.オブジェクトにはブラウザtitleを設定するためのtitleプロパティが含まれています.
例を挙げます.
{
      name: 'home',
      path: '/Home',
      component: Home,
      meta: {
        keepAlive: true,
        title: '     -   '
      }
    },

これで解決したが1つのタイトルしかないという問題も適用され,動的処理はブラウザtitleを構成した.