Comment définir la méthode de titre de chaque page à l'aide de vue-router

Ci-dessous, je partagerai avec vous un article utilisant vue-router pour définir le titre de chaque page. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Configuration de l'environnement de base : webpack + vue2.0 + vue-router +nodeJS

Entrez le fichier index.js sous le dossier du routeur

Premier Importer :

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

Configurer ensuite l'adresse de chaque itinéraire dans l'itinéraire :

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

Définir le nom du titre de la page dans chaque méta, et enfin dans Traverse

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

et ajoutez le titre

à chaque page VUE. Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Utilisez Vue.set pour ajouter dynamiquement des méthodes d'attributs d'objet dans Vue

Il n'y a pas de développement dans vue2.0 -Méthode de configuration sous server.js

Comment implémenter la fonction de glisser et de télécharger des fichiers avec barre de progression dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!