Vue3中vue-router配置的meta标签未显示，原因是什么？

你配置的路由meta只是存储在路由对象中的数据，vue-router不会自动将其渲染成页面<head>里的<meta>标签，所以页面中找不到对应的标签。需要手动编写逻辑，根据路由变化动态生成并更新这些标签。

具体实现方法 #

在router/index.js中添加路由守卫，在路由跳转完成后处理meta数据：

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

// 路由跳转完成后处理meta标签
router.afterEach((to) => {
  // 更新页面标题
  if (to.meta.title) {
    document.title = to.meta.title
  }

  // 处理meta标签
  if (to.meta.metaTags) {
    // 先移除之前通过路由生成的meta标签（避免重复）
    document.querySelectorAll('[data-vue-router-meta]').forEach(tag => tag.remove())
    
    // 遍历metaTags配置，创建新的meta标签并添加到head
    to.meta.metaTags.forEach(tagConfig => {
      const metaTag = document.createElement('meta')
      // 为meta标签设置配置的属性（name、content等）
      Object.entries(tagConfig).forEach(([key, value]) => {
        metaTag.setAttribute(key, value)
      })
      // 添加自定义属性，方便后续识别并移除
      metaTag.setAttribute('data-vue-router-meta', '')
      document.head.appendChild(metaTag)
    })
  }
})

补充：嵌套路由的meta合并 #

如果你的项目存在嵌套路由，需要合并父路由的meta数据，可以修改逻辑，遍历所有匹配的路由记录：

router.afterEach((to) => {
  // 合并所有匹配路由的metaTags
  const allMetaTags = to.matched.flatMap(record => record.meta.metaTags || [])
  const pageTitle = to.matched.find(record => record.meta.title)?.meta.title

  if (pageTitle) {
    document.title = pageTitle
  }

  // 移除旧标签
  document.querySelectorAll('[data-vue-router-meta]').forEach(tag => tag.remove())
  
  // 创建新标签
  allMetaTags.forEach(tagConfig => {
    const metaTag = document.createElement('meta')
    Object.entries(tagConfig).forEach(([key, value]) => {
      metaTag.setAttribute(key, value)
    })
    metaTag.setAttribute('data-vue-router-meta', '')
    document.head.appendChild(metaTag)
  })
})

这样就能确保父路由的meta配置也能生效。

内容的提问来源于stack exchange，提问作者Cedric Martens