Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-06 11:00:40
Original
3010 Leute haben es durchsucht

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'
Nach dem Login kopieren

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

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()
})
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage