Nested Router Construction and Navigation Guards

I. Principles of Nested Router Construction

In the Nuxt framework, nested routers allow embedding route structures within parent routes to form hierarchical navigation. Developers can define nested route paths using the routes configuration item, for example:

{
  path: '/user',
  component: () => import('@/views/User.vue'),
  children: [
    {
      path: 'profile',
      component: () => import('@/views/UserProfile.vue')
    },
    {
      path: 'settings',
      component: () => import('@/views/UserSettings.vue')
    }
  ]
}

This structure supports dynamic route parameters and permission control, allowing access to specific parameters of child routes via params.

Nuxt provides various navigation guard mechanisms to control route access permissions and behavior:

Global Guards: Defined in nuxt.config.js, affecting navigation for all routes, such as beforeEach and afterEach.
Route Guards: Used within route instances, such as beforeRoute and afterRoute, which can intercept entry into and exit from routes.

Nested Route Guards: Defined within child routes, capable of executing operations specific to certain child routes, for example:

// beforeRoute guard for a child route
beforeRoute((to, from, next) => {
  if (to.path === '/user/profile') {
    alert('Accessing user profile page');
    next(false);
  } else {
    next();
  }
})

Permission Control: Determine user access rights via the beforeRoute guard, for example:

beforeRoute((to, from, next) => {
  if (userRole !== 'admin') {
    next('/login');
  } else {
    next();
  }
})

Route Jump Interception: Prevent access to child routes in the parent route's beforeRoute to avoid loading unauthorized pages:
```
beforeRoute((to, from, next) => {
  if (!isLoggedIn) {
    next('/login');
  } else {
    next();
  }
})
```

Handling Dynamic Route Parameters: Access dynamic parameters in the beforeRoute guard of a child route via params:

beforeRoute((to, from, next) => {
  const userId = to.params.userId;
  if (!userId) {
    next('/404');
  } else {
    next();
  }
})

IV. Performance Optimization and Precautions

Avoid Infinite Recursion: Ensure that nested routers have limited path levels to prevent performance issues caused by circular references.
Route Lazy Loading: Use async functions for dynamic component imports to improve page loading speed.
Order of Navigation Guards: The execution order of guards must follow logical sequences; for instance, parent route guards should execute before child route guards.

By configuring nested routers and navigation guards appropriately, developers can achieve flexible permission control and route management while enhancing application maintainability and performance.

Nested Router Construction and Navigation Guards

I. Principles of Nested Router Construction

II. Types and Functions of Navigation Guards

III. Practical Application of Navigation Guards in Nested Routers

IV. Performance Optimization and Precautions