【Nuxt】404 页面 和 嵌套路由

404 页面

错误捕获页面

在应用程序源目录中添加 ~/error.vue，可以自定义默认错误页面，与 app.vue 放在一起。

error.vue

<script setup lang="ts">
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <button @click="handleError">清除错误</button>
  </div>
</template>

尽管它被称为“错误页面”，但它不是一个路由，不应该放在 ~/pages 目录中。出于同样的原因，你不应该在此页面中使用 definePageMeta。

此外，使用一个 动态路由也可以进行错误捕获，如下：

只需要一个动态参数组件的页面即可（slug 也可以是其他字符串），比如：

此时包含三个页面组件：/about, /about/about-fdsfsdf, /about/fdsf/fdsfs/fsdfsfsdf/…(404) 。

具体 404 路由页面可以写成某个路径下的 404，也可以直接写在 pages 下，作为根目录的 404 。

router.params 也可以获取动态参数 slug，为一个数组，比如上面的 [‘about’, ‘fdsf’, ‘fdsfs’, ‘fsdfsfsdf’, ‘…’] 。

匹配规则：

主动跳转错误

useError

服务端 + 客户端 (注意看当前的 nuxt的版本号是否支持)

throw useError({statusCode: 404, message: “找不到页面”})

服务端(部分) + 客户端

throw createError({statusCode: 404, message: “找不到页面”, fatal: true})

客户端 + 中间件/插件

throw showError({statusCode: 404, message: “找不到页面数据”})

嵌套路由

  <div class="parent-container">
    <h2>parent page</h2>
    <NuxtLink to="/parent/child1"><button>child1</button></NuxtLink>
    <!--    NuxtPage 路由占位-->
    <NuxtPage />
  </div>