vue如何实现404

Vue 实现 404 页面的方法

在 Vue 项目中实现 404 页面通常通过路由配置完成。以下是具体实现方式：

使用通配符路由匹配

在 Vue Router 配置中，可以通过 * 通配符捕获所有未定义的路由路径，并重定向到自定义的 404 组件。

const routes = [
  // 其他路由配置...
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

创建 404 组件

新建一个 Vue 组件作为 404 页面，例如 NotFound.vue：

<template>
  <div class="not-found">
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
    <router-link to="/">Return to Home</router-link>
  </div>
</template>

动态路由的优先级问题

如果项目使用了动态路由（如 /user/:id），需要确保 404 路由是最后一个路由配置项，因为路由匹配是按顺序进行的。

服务器端配置

对于生产环境部署，还需要在服务器配置中确保所有路径都指向 index.html，让 Vue Router 处理路由：

Nginx 示例配置：

location / {
  try_files $uri $uri/ /index.html;
}

Apache 示例配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

可选的高级处理

对于更复杂的需求，可以在路由守卫中实现自定义逻辑：

router.beforeEach((to, from, next) => {
  if (!router.hasRoute(to.name)) {
    next({ name: 'NotFound' })
  } else {
    next()
  }
})

这种方式可以结合后端 API 验证路由有效性，或者在导航前执行其他检查。