Vue项目如何动态设置路由meta信息中的title属性值

最新推荐文章于 2025-04-02 20:39:34 发布

星繁~

最新推荐文章于 2025-04-02 20:39:34 发布

阅读量8.6k

点赞数 9

分类专栏：前端文章标签： vue

原文链接：https://www.cnblogs.com/blogNYGJ/p/14280494.html

版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何在Vue应用中利用VueRouter的路由守卫动态设置不同页面的文档title。通过在具体路由配置中使用beforeEnter钩子设置meta.title，并结合全局解析守卫beforeResolve更新window.document.title，实现了不同页面显示不同title的功能。只需完成步骤一的代码修改即可达成目标。

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

场景：编辑、新建页面配置为同一个路由信息，期望不同页面的文档title展示不一样。
目前的配置如下，不能实现需求。

在这里插入图片描述
因此，我们需要动态的去设置meta的值。思路：借助Vue Router的路由独享守卫 beforeEnter 和全局解析守卫 beforeResolve 或全局后置钩子 afterEach 实现。

修改代码如下：
1.具体路由对象配置

{
    path: 'template-operation/:id?/edit',
    beforeEnter: (to, from, next) => {
      if (to.params.id) {
        to.meta.title = '编辑模板作业'
      } else {
        to.meta.title = '新建模板作业'
      }
      next()
    },
    name: 'file-upload/template-operation/edit',
    component: TemplateEdit
  },

2.全局路由钩子配置

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  window.document.title = to.meta.title
  next()
})

注意：自己只是做了步骤一便可以实现此功能