Nuxt.js中间件介绍

分类:计算机 | 前端 | Vue | SSR服务端渲染 | Nuxt.js框架 | 中间件 2040
更新:2020-04-19 12:37:13
编辑

参考资料

https://zh.nuxtjs.org/guide/routing#中间件

1 概念解释

中间件,顾名思义,是“中间的软件”,从广义上来说它是介于操作系统和应用程序之间的产品,与业务无关的组件。
在nuxt.js中,中间件是一个js文件,里面有自定义的函数,可以运行在一个页面(page)或一组页面渲染之前。

2 如何使用

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。
auth.js的内容如下:

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

在nuxt.config.js文件中配置中间件

module.exports = {
  router: {
    middleware: 'auth'
  }
}

这样配置以后,在访问nuxt系统的每个路由时都会在页面的渲染之前执行auth.js文件中定义的函数。

在指定的布局或者页面中配置中间件

例如,在pages/index.vue 或者 layouts/default.vue中添加如下配置,就可以在访问指定页面前执行auth.js文件中定义的函数。

export default {
  middleware: 'auth'
}