VUE h5移动端设置不同页面的头部title名称

小姑娘笔记总结

已于 2022-09-08 15:46:11 修改

阅读量1.3k

点赞数 1

分类专栏： router设置title名称问题

于 2022-09-08 15:12:22 首次发布

本文链接：https://blog.youkuaiyun.com/LZL_68/article/details/126764883

版权

Vue Router 动态title meta beforeEach 导航守卫

关键词由优快云通过智能技术生成

router设置title名称问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue Router中设置页面title，并通过meta属性实现动态调整。通过beforeEach钩子确保每次路由变化时，对应页面的title保持一致，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/loginTel/index'),
    meta: {
      title: '登录'
    }
  },
{
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home/index'),
    meta: {
      title: '主页'
    }
  },

注释：在router文件里面添加

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

注释：在main.js 文件里面进行添加

本人亲测有效！！！

希望能帮到困扰的你