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

亚连
リリース: 2018-06-06 11:00:40
オリジナル
3006 人が閲覧しました

以下に、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート