How to add meta in nuxt router?

In Nuxt.js, adding meta fields to routes is an effective approach for handling page-specific information such as authentication checks and page titles. In Nuxt, you can add meta fields to routes using the head method or the meta key within page components.

Method 1: Using the meta Key in Page Components

In Nuxt.js, you can directly define route meta fields within page components using the meta key. Here's a simple example:

javascript
// pages/about.vue
<script>
export default {
  meta: {
    requiresAuth: true,
    title: "About Us"
  }
}
</script>

In this example, requiresAuth and title are custom fields added to the route meta. You can access these meta fields in middleware or global route guards to determine if user authentication is required or to dynamically set page titles.

Method 2: Using the head Method for Dynamic Addition

Another option is to use the head method in page components to dynamically set meta tags. Although this is typically used for setting HTML header information, it can also be leveraged to set route meta fields:

javascript
// pages/contact.vue
<script>
export default {
  head() {
    return {
      title: 'Contact Us',
      meta: [
        // These are HTML meta tags
        { hid: 'description', name: 'description', content: 'Contact page description' }
      ]
    };
  },
  meta: {
    requiresAuth: false
  }
}
</script>

In this example, the meta key is used to set page-level custom meta information, while the head method is used for setting HTML header meta tags.

Accessing Route Meta Fields

Regardless of which method is used to define meta fields, you can access these meta fields in Nuxt middleware, plugins, or route guards through the route object. Here's a simple middleware example demonstrating how to check the requiresAuth field:

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

Summary

With these two approaches, you can flexibly add meta fields to routes in your Nuxt application, choosing the appropriate method based on project requirements. This enhances the flexibility of route management and the security of page information.