vue-routerを使用して各ページのタイトルメソッドを設定する方法

以下に、vue-router を使用して各ページのタイトルを設定する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

基本的な環境構成: webpack + vue2.0 + vue-router +nodeJS

routerフォルダーの下にindex.jsファイルを入力します

最初に導入します:

import Vue from 'vue'
import Router from 'vue-router'

次に、ルーティングアドレスで各ルートを構成します:

routes: [
 {   /* （首页）默认路由地址 */
  path: '/',
  name: 'Entrance',
  component: Entrance,
  meta: {
  title: '首页入口'
  }
 },
 {   /* 修改昵称 */
  path: '/modifyName/:nickName',
  name: 'modifyName',
  component: modifyName,
  meta: {
  title: '修改昵称'
  }
 },
 {   /* 商品详情 */
  path: '/goodsDetail',
  name: 'goodsDetail',
  component: goodsDetail,
  meta: {
  title: '商品详情'
  }
 },
 { /* Not Found 路由，必须是最后一个路由 */
  path: '*',
  component: NotFound,
  meta: {
  title: '找不到页面'
  }
 }
 ]

各メタにページのタイトル名を設定し、最後にトラバースします

router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面title */
 if (to.meta.title) {
 document.title = to.meta.title
 }
 next()
})

このようにして、各VUEページにタイトルが追加されます

以上が皆さんの参考になれば幸いです。将来。 。

関連記事:

Vue.setを使用してVueにオブジェクト属性メソッドを動的に追加する

vue2.0ではdev-server.jsの下に設定メソッドがありません

Vueファイルで進行状況を実装する方法ドラッグ＆アップロード機能

以上がvue-routerを使用して各ページのタイトルメソッドを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。