vue.js：路由跳转时更改页面title - vue篇

router/index.js内代码

文件名：router/index.js

routes: [
    {
      path: '/',
      name: 'index',
      component: Index,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        title: '登录页'
      }
    },    
    {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {
        title: '注册页'
      }
    },    
    { // 人才服务协议
      path: '/agreement',
      name: 'agreement',
      component: Agreement,
      meta: {
        title: '人才服务协议'
      }
    },    
    { // 隐私条款
      path: '/secretRules',
      name: 'secretRules',
      component: SecretRules,
      meta: {
        title: '隐私条款'
      }
    },   


··· 等等  ···
  ]
})

main.js代码

文件名：main.js

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

总结

1. router文件夹下的index.js文件中给每个path添加meta:{ }；

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

2. js入口文件main.js中添加代码（具体参考下文： 代码片段A）

     meta: {
        title: '注册页'
      }

踩坑，留下足迹 ~