今天遇到个路由栈溢出的坑。在url中输入不存在的路由时,控制台会报错显示栈溢出
从报错中可以明显看出路由的问题,但是整个项目中页面找到路由递归的代码。最后思考了一下,既然是输入不存在的路由才会报错,那么问题一定在路由的配置里,果不其然发现了下面这行代码:
// router
....
{ path: '*', redirect: '/404', hidden: true }
....
星号通配符一般都是用在错误路由的,路由错误的时候匹配到通配符,然后进行重定向。 我的代码里面也进行了重定向到 '/404',问题就出在这里,我没有定义这个路由,所以它就会一直的找这个路由,才导致最后的栈溢出。
修复后代码:
....
{
path: '/404',
name: 'Page404',
component: () => import('@/views/404'),
hidden: true
},
{ path: '*', redirect: '/404', hidden: true }
....