中间件目录
middleware 目录包含应用程序中间件。中间件允许定义可在渲染页面或页面组（布局）之前运行的自定义函数。
共享中间件应放在 middleware/ 目录中，文件名即为中间件名称（middleware/auth.js 会成为 auth 中间件）。也可以直接使用函数定义页面特定的中间件，参见匿名中间件 。
中间件接收上下文 作为第一个参数。
middleware/user-agent.js
export default function (context) {
// 向上下文添加 userAgent 属性
context.userAgent = process.server
? context.req.headers['user-agent']
: navigator.userAgent
}
在 universal 模式下，中间件在服务端（Nuxt 应用的首次请求时，例如直接访问应用或刷新页面时）调用一次，在客户端导航到其他路由时再次调用。使用 ssr: false 时，两种情况下都在客户端调用中间件。
中间件按以下顺序依次执行：
-
nuxt.config.js（文件中的顺序） - 匹配的布局
- 匹配的页面
路由中间件
中间件可以是异步的，返回 Promise 或使用 async/await。
middleware/stats.js
import http from 'http'
export default function ({ route }) {
return http.post('http://my-stats-api.com', {
url: route.fullPath
})
}
然后在 nuxt.config.js 中使用 router.middleware 键：
nuxt.config.js
export default {
router: {
middleware: 'stats'
}
}
这样每次路由变化时都会调用 stats 中间件。
也可以将中间件（多个）添加到特定布局或页面：
pages/index.vue / layouts/default.vue
export default {
middleware: ['auth', 'stats']
}
命名中间件
通过在 middleware/ 目录中创建文件可以创建命名中间件，文件名即为中间件名称。
middleware/authenticated.js
export default function ({ store, redirect }) {
// 如果用户未认证
if (!store.state.authenticated) {
return redirect('/login')
}
}
pages/secret.vue
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware: 'authenticated'
}
</script>
匿名中间件
如果只需要在特定页面使用中间件，可以直接使用函数（或函数数组）：
pages/secret.vue
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware({ store, redirect }) {
// 如果用户未认证
if (!store.state.authenticated) {
return redirect('/login')
}
}
}
</script>
Edit this page on GitHub
Updated at Tue, Apr 14, 2026