vuejs项目：路由跳转时更改页面title - 代码篇

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88031563

---

（含效果图、演示代码）vue路由跳转不同页面的时候，自动更改页面title

---

一、效果图演示：

---

二、示例 · 重要代码：

文件名：main.js

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

文件名：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: '隐私条款'
      }
    },   


··· 等等  ···
  ]
})

---

三、设置总结

• router文件夹下的index.js文件中给每个path添加meta:{ }；
  （具体参考下文： 代码片段B）

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

***类比注册页：

1. 先添加代码片段A：

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

2. 再添加设置代码片段B：

     meta: {
        title: '注册页'
      }

---

以上就是关于“ vuejs项目：路由跳转时更改页面title - 代码篇 ” 的全部内容。