VueJS及Vuetify新手求助：如何在Vuetify3中创建404错误页面？

首先要明确：Vuetify本身不提供路由系统，它只是一个UI组件库。你项目中的pages文件夹路由功能，通常来自Vue Router的自动路由插件（比如unplugin-vue-router），而非Vuetify的内置特性。NextJS的保留路由是框架层面的约定，但Vuetify没有这类内置规则，所以直接创建NotFound.vue不会自动生效。

下面分两种场景给出解决方案：

场景1：使用了自动路由插件（如unplugin-vue-router） #

这类插件通过约定式路由生成规则，要实现404页面，需要创建通配符命名的组件，而非简单的NotFound.vue：

• 在pages文件夹下创建[...notFound].vue文件（文件名的[...]是通配符标识，匹配所有未定义的路由路径）
• 在该组件内编写404页面内容，示例：

<template>
  <v-container class="pa-6">
    <v-card>
      <v-card-title class="text-h2">404 - 页面未找到</v-card-title>
      <v-card-text>你访问的页面不存在，请检查网址是否正确。</v-card-text>
      <v-card-actions>
        <v-btn to="/" color="primary">返回首页</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

• 确保路由插件配置中允许通配符路由，比如在vite.config.js中：

import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: 'src/pages',
      extensions: ['.vue'],
      // 启用通配符路由支持
      allowPrerender: true,
    }),
  ],
})

场景2：手动配置Vue Router #

如果项目没有用自动路由插件，直接在路由配置中添加通配符路由即可：

• 在路由配置文件（通常是src/router/index.js）中，添加匹配所有未定义路径的路由规则：

import { createRouter, createWebHistory } from 'vue-router'
// 导入你的NotFound组件
import NotFound from '../pages/NotFound.vue'

const routes = [
  // 先定义你的所有正常路由
  { path: '/', component: () => import('../pages/Home.vue') },
  { path: '/about', component: () => import('../pages/About.vue') },
  
  // 最后添加通配符路由，匹配所有未匹配的路径
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

• 此时pages/NotFound.vue会被正确渲染为404页面。

关键提醒 #

不要混淆UI库和框架的职责：Vuetify只负责UI组件的渲染，路由逻辑完全由Vue Router控制。NextJS的约定式路由是框架内置的，但Vue生态中需要依赖Vue Router或其插件来实现类似功能。

内容的提问来源于stack exchange，提问作者user3135691