vueルートの切り替えを実現し、title機能を変更します。

vueプロジェクトは通常単一ページアプリケーションであるため、入口ファイルindex.は一つのtitleだけであり、単一ページに展示されているいくつかのページはルートの切り替えに従って同じindex.html上で異なったレンダリングをするだけであり、この時のtitle属性はページの切り替えによって変更されることはない。
ルート切替title変換を実現するには、vue-routerのナビゲーション・ガードにより実現できます。一番簡単なディレクトリ構造は以下の通りです。

├── index.html
├── main.js
├── api
│  └── ... #    API  
├── common
│  └── constants.js  //title 
├── components
│  ├── HelloWorld.vue
│  ├── Test.vue
│  ├── User.vue
│  └── ...
├── router
│  └── index.js

以下は主にvue-routerの内容です。他のページの内容はどうでもいいです。
router/index.jsの内容は以下の通りです。

import Vue from 'vue'
import Router from 'vue-router'
import constants from '../common/constants'
Vue.use(Router)
const router = new Router({
 routes: [{
    path: '/',
    name: 'HelloWorld',
    component: reslove => require(['../components/HelloWorld'], reslove)
  },{
   path: '/hello',
   name: 'hello',
   props: {name: 'garrett'},
   component: reslove => require(['../components/Test'], reslove)
  },{
   path: '/user',
   name: 'user',
   component: reslove => require(['../components/User'], reslove)
  },{
   path: '*',
   redirect: {name: 'hello'}
  }]
})
//      ，                title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

ここでは大域後置ガードを使ってルートの切り替えを統一しています。大域フロントガードは通常の状況でも大丈夫ですが、ナビゲーションの半分が終了すると、ページに目標ナビゲーションページが描画されていません。しかし、titleと取り換えられます。ここでは大域後置ガードを使うのが妥当です。上から見れば、実際のキーコードは三行で、他はまだです。

constants.js     ：
export default{
 HelloWorld: '  ',
 hello: '   ',
 user: '   '
}

オブジェクトを簡単にエクスポートするだけです。
締め括りをつける
以上述べたのは小编が皆さんに绍介したvueルートの切り替えがtitleの机能を変えることを実现しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。