NUXT 中间件 Middleware

2024年5月22日 783次阅读 来源: cactusG90

中间件可以使您的自定义的函数在渲染页面之前运行

所有的中间件都必须放置在middleware/目录下。文件名将作为中间件的名称（如：middleware/auth将成为中间件auth）。
中间件收到上下文作为第一个参数︰

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

中间件将按照此顺序在序列中执行：

  1. nuxt.config.js

  2. 匹配的布局

  3. 匹配的页面

中间件可以是异步的，仅返回一个Promise或者使用第二个callback返回值：
middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

然后，在nuxt.config.js，布局或者页面中，配置middleware参数
nuxt.config.js

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

中间件stats将在每次路由改变时被调用。
想了解中间件的例子，请移步example-auth0

郑重声明！英文极差，纯属看不懂文档自己整理，翻译如有问题请各位大神指教。如有不服，你来打我呀？

    原文作者：cactusG90
    原文地址: https://segmentfault.com/a/1190000008530068
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞