当前位置：首页 > VUE

vue如何实现404

2026-02-16 23:43:44VUE

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>

服务器端配置（可选）

如果项目需要 SSR 或部署到静态服务器，需确保服务器返回 404 状态码。例如在 Nginx 中：

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

重定向处理

对于某些场景，可能需要将旧 URL 重定向到新页面而非显示 404。可以在路由守卫中处理：

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    next('/404')  // 重定向到指定 404 路由
  } else {
    next()
  }
})

动态路由的 404 处理

当使用动态路由时，可能需要验证参数有效性。例如在组件内检查：

vue如何实现404

export default {
  async created() {
    const resource = await fetchResource(this.$route.params.id)
    if (!resource) {
      this.$router.replace('/404')
    }
  }
}

通过以上方法可以灵活实现 Vue 应用的 404 页面功能，既提升用户体验也符合 SEO 最佳实践。