vue.js Nuxt3中的工艺路线确认

kyvafyod  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(183)

如果路径验证返回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页面
yhived7q

yhived7q1#

Nuxt路由是基于目录的。“Catch-all”不能递归应用。
你要找的是:

/pages
├─ /foo
│  └─ [nested].vue
└─ [root].vue

相关问题