So legen Sie die Titelmethode jeder Seite mithilfe des Vue-Routers fest

Im Folgenden werde ich einen Artikel mit Vue-Router zum Festlegen des Titels jeder Seite teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Grundlegende Umgebungskonfiguration: Webpack + vue2.0 + vue-router +nodeJS

Geben Sie die Datei index.js im Router-Ordner ein

Zuerst Importieren:

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

Konfigurieren Sie dann die Adresse jeder Route in der Route:

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: '找不到页面'
  }
 }
 ]

Legen Sie den Titelnamen der Seite in jedem Meta fest und durchlaufen Sie schließlich

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

Auf diese Weise wird jeder VUE-Seite ein Titel hinzugefügt

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie Vue.set, um Objektattributmethoden dynamisch in Vue hinzuzufügen

In vue2.0 gibt es keinen Entwickler -Konfigurationsmethode unter server.js

So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien mit Fortschrittsbalken in Vue

Das obige ist der detaillierte Inhalt vonSo legen Sie die Titelmethode jeder Seite mithilfe des Vue-Routers fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!