How to add meta in nuxt router?

在Nuxt.js中，添加路由的meta字段是一种很好的方式来处理页面级的特定信息，比如权限验证、页面标题等。在Nuxt中，可以通过页面组件的head方法或者页面组件的meta键来添加路由的meta字段。

方法 1: 使用页面组件的 meta 键

在Nuxt.js中，你可以直接在页面组件中使用meta键来定义路由的meta字段。这是一个简单的例子：

javascript
// pages/about.vue
<script>
export default {
  meta: {
    requiresAuth: true,
    title: "关于我们"
  }
}
</script>

在上面的例子中，requiresAuth 和 title 是添加到路由meta的自定义字段。你可以在中间件或者全局的路由守卫中访问这些meta字段，来决定是否需要用户认证，或者动态设置页面标题。

方法 2: 使用 head 方法动态添加

另一个选项是使用页面组件的 head 方法来动态设置meta标签，虽然这通常用于设置HTML的头部信息，我们也可以利用它来设置路由的meta字段：

javascript
// pages/contact.vue
<script>
export default {
  head() {
    return {
      title: '联系我们',
      meta: [
        // 这里添加的是HTML的meta标签
        { hid: 'description', name: 'description', content: 'Contact page description' }
      ]
    };
  },
  meta: {
    requiresAuth: false
  }
}
</script>

在这个例子中，meta键用来设置页面级的自定义meta信息，而head方法则用于设置HTML头部的meta标签。

访问路由的 meta 字段

无论是哪种方法定义的meta字段，你都可以在Nuxt的中间件、插件或者路由守卫中通过route对象访问这些meta字段。以下是一个简单的中间件示例，演示如何检查requiresAuth字段：

javascript
// middleware/auth.js
export default function ({ store, redirect, route }) {
  if (route.meta.requiresAuth && !store.state.isAuthenticated) {
    redirect('/login');
  }
}

总结

通过这两种方式，你可以灵活地为Nuxt应用的路由添加meta字段，根据项目需求选择合适的方法。这样可以增加路由管理的灵活性和页面信息的安全性。