在项目中有时候需要在网站切换路由的过程中添加一些自定义的逻辑,比如权限什么的。这个时候可以使用nuxt的middleware。
nuxt3提供了一个可定制化的路由中间件框架。这个中间件运行在nuxt3(nuxt3是基于vue3的)应用的vue部分,在你跳转到指定路由之前,可以执行你自己添加的代码。
上面的前两个路由中间件可以定义在 definePageMeta中
例如:
-| middleware/
---| auth.ts
<!-- 在页面文件中的代码 -->
<script setup>
definePageMeta({
middleware: ["auth"]
// or middleware: 'auth'
})
</script>
路由中间件以当前路由和下一个路由为参数,如下
export default defineNuxtRouteMiddleware((to, from) => {
if (to.params.id === '1') {
return abortNavigation()
}
return navigateTo('/')
})
nuxt3提供两个可直接从中间件返回的方法
navigateTo
navigateTo (to: RouteLocationRaw | undefined | null, options?: { replace: boolean, redirectCode: number, external: boolean )
此方法可以在中间件或插件中重定向到指定的路由。 也可以直接调用来完成页面的跳转。
abortNavigation
abortNavigation (err?: string | Error)
这个就是直接终止跳转,并可以返回一些错误信息。
中间件可能的返回值说明:
return navigateTo('/')
or return navigateTo({ path: '/' })
, 重定向到指定的路径,如何是在服务端的话,会设置 redirect code 为302return navigateTo('/', { redirectCode: 301 })
, 重定向到指定的路径,如果直服务端的话,会设置 redirect code 为301 表示这个重定向的永久的。return abortNavigation()
终止当前的跳转return abortNavigation(error)
终止跳转并带有错误信息通过addRouteMiddleware()
方法可以在代码中动态添加全局和命名路由中间件。例如在插件中
export default defineNuxtPlugin(() => {
addRouteMiddleware('global-test', () => {
console.log('this global middleware was added in a plugin and will be run on every route change')
}, { global: true })
addRouteMiddleware('named-test', () => {
console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')
})
})
版权声明:本文为凸然网站的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:nuxt3中间件(middleware)详解