VUE修改每个页面title

原创于 2019-04-26 16:08:05 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #页面title

VUE 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用路由守卫beforeEach来动态设置页面标题，通过to.meta.title属性实现页面切换时标题的自动更新，确保了用户体验的一致性和友好性。

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

//index.js
routes: [
    {
        name:'home',
          path: '/home/:openname',
          component: Home,
          meta: {
            title: '首页'
        }
    }
  ]

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