Vue3 动态修改页面的title

wj1713520

于 2022-04-12 16:47:52 发布

阅读量1w

点赞数 12

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/124128022

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

在Vue项目中，通过在路由的`index.js`文件中添加路由守卫`beforeEach`，可以实现在每次跳转页面时动态设置`window.document.title`为当前页面的标题。首先创建并导出路由器实例，然后在`beforeEach`钩子中更新标题，确保代码位于`createRouter`和`export default router`之间。每个子路由需配置`meta`属性，包含页面标题。这样，每个子路由切换时，浏览器标题将随之更新。

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

在路由的 index.js 文件内添加如下代码：

注意！以下代码必须写在 const router 和 export default router 之间，否则会报错。

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

完整版：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

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

export default router

之后，再去设置每个子路由页的标题即可，在每个子路由对象中添加 meta 属性：

      {
        path: '/main',
        name: 'main',
        component: Main,
        meta: { title: '首页' }
      }

效果图如下：