码农叉叉歪

Appearance

Return to top
快速导航

addRouteMiddleware - 动态添加路由中间件

addRouteMiddleware()是一个在 Nuxt 中实现动态添加路由中间件的辅助方法。

TIP

路由中间件是存储在 Nuxt 应用程序的middleware目录中的导航卫士（除非另有设置）。

用法 

addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

参数

name

  • Type: string | RouteMiddleware

name可以是字符串，也可以是RouteMiddleware类型的函数。 该函数将to(即将要进入的路由)作为第一个参数，将from(当前导航正要离开的路由)作为第二个参数，这两个参数都是 Vue 路由对象。

了解有关路由对象详细信息

middleware

  • Type: RouteMiddleware

middleware参数是一个RouteMiddleware类型的函数。和name参数是函数时一样，具有to和from参数。如果addRouteMiddleware()中的第一个参数是函数时，它就成为可选参数。

options

  • Type: AddRouteMiddlewareOptions

一个可选的options参数允许把global的值设置为true，以表明路由中间件是否是全局的（默认设置为false）。

匿名路由中间件

匿名路由中间件没有名称，它的第一个参数是函数。

// ~/plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    if (to.path === '/forbidden') {
      return false
    }
  })
})

命名路由中间件

命名路由中间件需要一个字符串作为第一个参数，一个函数作为第二个参数。

当在一个插件中定义时，它将覆盖位于middleware目录下的同名中间件。

// ~/plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('named middleware added in Nuxt plugin')
  })
})

全局路由中间件

可以设置可选的第三个参数{ global: true }，表明该路由中间件是否是全局的：

// ~/plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
      console.log('global middleware that runs on every route change')
    },
    { global: true }
  )
})