nuxt中间件

Nuxt.js 中间件是在路由切换之前或之后执行的函数。它可以用于处理身份验证、路由跳转等任务。

在 Nuxt.js 中，中间件存放在 middleware 目录中。每个中间件文件都是一个导出函数，该函数接收 context 对象作为参数，并可以在该函数中执行一些操作。

以下是一个简单的示例中间件：

// middleware/example.js

export default function(context) {
  console.log('This is an example middleware');
}

要在路由切换之前执行中间件，可以在 nuxt.config.js 文件中的 router 配置中指定中间件：

// nuxt.config.js

export default {
  router: {
    middleware: ['example']
  }
}

在上面的示例中，example 中间件将在每次路由切换之前执行。

如果要在路由切换之后执行中间件，可以使用 Nuxt.js 提供的特殊的生命周期钩子函数 afterEach：

// middleware/example.js

export default function(context) {
  context.app.router.afterEach(() => {
    console.log('This is an example middleware');
  });
}

在上面的示例中，example 中间件将在每次路由切换之后执行。

除了上述方法外，还可以在页面组件中使用中间件。只需在页面组件的 middleware 属性中指定要使用的中间件即可：

// pages/example.vue

export default {
  middleware: 'example'
}

在上面的示例中，example 中间件将在该页面组件被加载之前执行。

需要注意的是，如果一个中间件需要在每个页面都执行，可以将其配置在 nuxt.config.js 文件中的 router 配置中的 middleware 数组中。如果一个中间件只是在特定的页面组件中执行，可以将其配置在页面组件的 middleware 属性中。

中间件的执行顺序是按照定义的顺序来的，先定义的中间件先执行。

这就是 Nuxt.js 中间件的基本用法。中间件可以帮助我们在路由切换之前或之后执行一些任务，以实现更灵活的功能