如果路径验证返回false
,则它将显示/error.vue
,但不渲染/:pathMatch(.*)*
的组件。~/plugins/route.ts
:
export default defineNuxtPlugin(() => {
useRouter().addRoute({
path: '/:pathMatch(.*)*',
component: () => import('~/pages/404.vue'),
});
return {};
});
~/pages/404.vue
:
<template>err</template>
~/pages/problem/[id]/index.vue
:
<script lang="ts" setup>
definePageMeta({
validate(route) {
return new RegExp('^\\d+$').test(String(route.params.id));
},
});
</script>
<template>problem</template>
- 导航测试**:
- 访问
/foo
-〉渲染404页面 - 访问
/foo/bar
-〉渲染404页面 - 访问
/problem/foo
-〉渲染下一个错误页面 - 访问
/problem/foo/bar
-〉渲染404页面
1条答案
按热度按时间yhived7q1#
Nuxt路由是基于目录的。“Catch-all”不能递归应用。
你要找的是: