Vue不同页面展示不同的title实现方式

2025-10-27 09:07:42 作者：马❀腾

文章介绍了如何在`router.js`文件中设置路由、添加自定义的`meta`属性来定义当前视图的标题,并在路由导航守卫中进行相应的处理,最后通过查看效果来验证实现

Vue不同页面展示不同的title

设置 routes: [] 添假meta属性自定义当前试图的title

{
   path: '/login',
   component: Login,
   meta: { title: '登录系统' }
}

路由导航守卫中

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。