Nuxt.js: Use middlware from a specific route to its all child routes

user_9313676 0
Viewed 761

I have a route for /admin/users that acts as a parent route for all of its child routes. (e.g. /admin/users/@username/stats or /admin/users/@username/logs etc.). There will be many nested routes as well, so how do I use specific middleware to all of /admin/users's child routes?

vue-router nuxt.js vue.js
1 Answers

You could use a dynamic route for /admin/users/_username/_param.vue, and use the middleware prop in the _param.vue page:

// /pages/admin/users/_username/_param.vue
export default {
  middleware({ params, redirect }) {
    console.log('params', params.username, params.param)

    // https://nuxtjs.org/docs/2.x/internals-glossary/context#redirect
    // Redirect to the child route, passing along any route parameters.
    // `params.param` is 'stats' or 'logs'
    redirect({ name: params.param, params })
  }
}
user_62771510
Related