Vue 实现 404 页面跳转的方法

在Vue项目开发中，实现404页面跳转是一个重要的功能。它能够在用户访问不存在的页面时，引导用户回到正确的页面，提升用户体验。下面将介绍几种常见的Vue实现404页面跳转的方法。

方法一：使用Vue Router的通配符路由

Vue Router提供了通配符路由的功能，可以匹配所有未匹配到的路径。在定义路由时，添加一个通配符路由规则，将其指向404页面组件。例如：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound }
];

在上述代码中，{ path: '*', component: NotFound } 表示匹配所有未匹配到的路径，当用户访问不存在的页面时，就会跳转到NotFound组件，即404页面。

方法二：通过导航守卫实现

导航守卫可以在路由跳转前进行一些逻辑判断。在router.beforeEach导航守卫中，检查当前要访问的路径是否存在于定义的路由列表中。如果不存在，则手动跳转到404页面。示例代码如下：

router.beforeEach((to, from, next) => {
  const existingRoutes = router.options.routes.map(route => route.path);
  if (!existingRoutes.includes(to.path)) {
    next('/404');
  } else {
    next();
  }
});

这段代码会在每次路由跳转前检查目标路径是否存在于已定义的路由中，如果不存在，则跳转到/404路径对应的404页面。

方法三：结合后端返回状态码实现

当后端返回404状态码时，前端可以根据这个状态码来触发404页面的跳转。在Vue项目中，可以在请求拦截器中对响应状态码进行判断，如果状态码为404，则跳转到404页面。

通过以上几种方法，我们可以在Vue项目中实现404页面的跳转。根据项目的具体需求和架构，选择合适的方法来确保用户在访问不存在的页面时能够得到友好的提示和引导。