vue =》 vue-router：404页面路由配置

做个有准备的人

于 2021-11-18 11:33:08 发布

阅读量1.3k

点赞数

分类专栏：前端埋坑之路-前端技术文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u011565547/article/details/121397048

版权

前端埋坑之路-前端技术专栏收录该内容

363 篇文章 ¥9.90 ¥99.90

订阅专栏

超级会员免费看

本文介绍了在Vue.js应用中如何利用vue-router设置404页面。通过使用通配符*进行路由匹配，并配置重定向，确保未找到对应路由时能正确跳转至404页面。关键在于将404路由配置放在所有其他路由的最后，以确保其生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
    name:'404',
    path:'/404.html',
    component: resolve => require(['../page/NotFound/view.vue'], resolve),
},
{
     path:'*',
     redirect:{
         name:"404"
     }
}

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

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

---------------------------------------------------------------------

import NotFound from './components/NotFound.vue'

{
                path: '*',
                component: 'NotFound'
            },