当前位置：首页 > VUE

vue如何实现404

2026-03-28 22:36:35VUE

实现 Vue 404 页面

在 Vue 项目中，可以通过路由配置实现 404 页面。以下是具体方法：

配置路由

在路由配置文件（通常是 router/index.js）中，添加一个通配符路由作为 404 页面。这个路由会匹配所有未定义的路由路径。

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

创建 404 组件

创建一个名为 NotFound.vue 的组件，用于显示 404 页面内容。这个组件可以包含自定义的错误信息和返回首页的链接。

<template>
  <div>
    <h1>404 Not Found</h1>
    <p>The page you are looking for does not exist.</p>
    <router-link to="/">Go back to home</router-link>
  </div>
</template>

路由顺序

vue如何实现404

确保通配符路由是路由配置中的最后一个路由。路由匹配是按照定义的顺序进行的，因此通配符路由必须放在最后才能正确捕获未匹配的路由。

重定向

在某些情况下，可能需要将特定的无效路径重定向到 404 页面。可以在路由配置中使用重定向来实现。

vue如何实现404

{
  path: '/old-path',
  redirect: '/404'
}

服务器配置

如果项目部署在服务器上，还需要配置服务器以支持 Vue 的路由。例如，在 Nginx 中，可以添加以下配置：

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

这样，服务器会将所有未匹配的路径重定向到 index.html，由 Vue 路由处理 404 情况。

动态路由的 404 处理

对于动态路由，可以在组件内部进行额外的检查，例如验证动态参数是否有效。如果无效，可以导航到 404 页面。

export default {
  mounted() {
    if (!this.isValidParam(this.$route.params.id)) {
      this.$router.replace('/404');
    }
  },
  methods: {
    isValidParam(id) {
      // 验证逻辑
    }
  }
}