vue 404页面的设置

最新推荐文章于 2025-07-30 09:49:54 发布

原创最新推荐文章于 2025-07-30 09:49:54 发布 · 962 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

190 篇文章

订阅专栏

本文介绍了Vue.js应用中如何配置路由以处理404页面，包括使用'*'通配符进行未定义路由的捕获，并通过redirect指令重定向至404页面。同时讨论了在首页需要登录的情况下，如何利用路由守卫来决定跳转至首页或登录页面的策略。这种配置确保了用户在访问不存在的路径时能正确地被引导至404错误页面。

{
    name:'404',
    path:'/404.html',
    component: ()=> import('../page/NotFound/view.vue'),
},
{
     path:'*',
     redirect:{
         name:"404"
     }
}
// 或者可以不写 重定向到404而是直接首页 如果首页需要登录的话 设置路由守卫 再决定继续跳转到首页还是登录页面

// 或者可以不写重定向到404而是直接首页如果首页需要登录的话设置路由守卫再决定继续跳转到首页还是登录页面

注：1.* 为通配符，匹配所有路径。redirect:重定向到404页面。

2. 必须将此路由配置放到最后，否则无法实现该功能。