【Nuxt】路由中间件和 definePageMeta

路由中间件

Nuxt 提供了一个可定制的路由中间件，用来监听路由的导航，包括：局部和全局监听（支持再服务器和客户端执行）

路由中间件分为三种：

匿名（或内联）路由中间件

在页面中使用definePageMeta函数的 middleware 属性定义，可监听局部路由。当注册多个中间件时，会按照注册顺序来执行。

definePageMeta({
  middleware: [
      function (to, from) {
        console.log(to, from)
      }
      // 可以写多个中间件 ....
  ]
})

命名路由中间件

在middleware目录下定义，并会自动加载中间件。命名规范(kebab-case)

• server:·刷新浏览器的会在服务器端执行
• client:在客户端切换路由，只会在客户端执行

@/middleware/home.ts

export default defineNuxtRouteMiddleware(function (to, from) {
    console.log('第二个中间件', to, from)
})

definePageMeta({
  middleware: [
      function (to, from) {
        console.log('第一个中间件', to, from)
      },
      "home"
  ]
})

全局路由中间件

优先级最高，支持两端。添加 global 后缀默认为全局中间件。

@/middleware/auth.global.ts

export default defineNuxtRouteMiddleware(function (to, from) {
    if (to.path === '/login') {
        return
    } else {
        if (!useAuthStore().isAuthenticated) {
            return navigateTo('/login')
        }
    }
})

definePageMeta

define-page-meta

definePageMeta是一个编译器宏，可以用它为位于pages/目录中的页面组件设置元数据。

definePageMeta({
  // 校验路由是否放行
  validate: (route)=> {
    // return !!route.query.id // 为 true 放行 为false 会跳转到默认的 404 页面
    // 还可以直接返回一个带有statusCode/statusMessage的对象，以立即以错误响应（不会检查其他匹配）
    return {
      statusCode: 404,
      // 这里的错误信息最好写英文 写中文可能会有奇怪的 bug O.o
      statusMessage: "不论怎么样都不放行 O.o"
    }
  },
  // 中间件
  middleware: [
      function (to, from) {
        console.log('第一个中间件', to, from)
      },
      "home"
  ]
})

我们也可以自定义 404 页面，只需在根目录下创建一个 error.vue 的组件即可。

error.vue

<script setup>
const props = defineProps({
  error: Object
})
const toHome = () => {
  clearError({
    redirect: '/'
  })
}
</script>

<template>
  <div>error: {{ error }}</div>
  <button @click="toHome">回首页</button>
</template>