如何在Nuxt路由中间件中设置to.meta属性实现自定义页面标题

问题描述 #

我编写了如下路由中间件，希望通过它为每个页面设置带前缀的动态标题：

export default defineNuxtRouteMiddleware(async (to, from) => {
  console.log(to);
  useHead({
    title: `MYApp - ${(String(to.meta.name))}`,
  })
})

预期效果是首页标题为「MYApp - Home」，商品页为「MYApp - Shop」。但我在首页添加以下代码后，to.meta始终为空：

useHead({
  meta: [
    { name: 'Home', content: 'Content' }
  ],
})

解决方案 #

正确的做法是使用Nuxt提供的definePageMeta()来定义页面的元信息，而非通过useHead()的meta字段传递。

实现步骤 #

• 在对应页面中定义页面元信息
  • 首页（示例路径：pages/index.vue）：

    definePageMeta({
      name: 'Home'
    })
    

  • 商品页（示例路径：pages/shop.vue）：

    definePageMeta({
      name: 'Shop'
    })
    

• 保持路由中间件不变
  你编写的原有路由中间件代码无需修改，它会自动读取当前页面通过definePageMeta定义的name字段，动态生成对应的页面标题。

内容的提问来源于stack exchange，提问作者Some Name