How to set the title method of each page using vue-router

Below I will share with you an article using vue-router to set the title of each page. It has a good reference value and I hope it will be helpful to everyone.

Basic environment configuration: webpack vue2.0 vue-router nodeJS

Enter the index.js file under the router folder

First introduce:

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

Then configure the address of each route in the routing:

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

Set the title name of the page in each meta, and finally traverse

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

This adds a title to each VUE page

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use Vue.set to dynamically add object attributes in Vue

There is no dev in vue2.0 -Configuration method under server.js

How to implement the file dragging and uploading function with progress bar in Vue

The above is the detailed content of How to set the title method of each page using vue-router. For more information, please follow other related articles on the PHP Chinese website!