- 最近测试说线上页面有概率跳转到404界面,当时听到时我就很奇怪,这还有概率跳,刚开始看了下点击跳转按钮的的设置,没发现问题,既然是有概率那难道项目里某个地方有跳转判断?我查了所有关于路由的地方,完全没有额外的判断,那就去好好看看根源吧,忽然就看见了一个
alias: '/main/main',
的路由设置,拿到界面一换果然404,概率还剩百分百。那这样的话那个有概率出现应该是有的访问到了路由别名上了,导致重定向后此界面的子路由匹配不了这个路由别名导致的。
1. 首先贴出没改前的路由
import specializedSubject from './modules/specialized-subject'
import specializedDisease from './modules/specialized-disease'
import healthPlan from './modules/health-plan'
import doctorPatient from './modules/doctor-patient'
import specoalDisease from './modules/special-disease'
export default [
{
path: '/',
name: 'layout',
alias: '/main/main',
redirect: '/specialized-subject',
component: () => import('@/views/layout'),
children: [
...specializedSubject,
...healthPlan,
...doctorPatient,
...specoalDisease,
...specializedDisease,
{
path: 'welcome',
name: 'welcome',
component: () => import('@/views/welcome'),
meta: {
title: '欢迎页'
}
},
{
path: 'iframe',
name: 'iframe',
component: () => import('@/views/iframe')
}
]
},
{
path: '*',
name: 'not-found',
component: () => import('@/views/404'),
meta: {
noAuth: true
}
}
]
- 主要问题在于重定向后的路由界面
- 问题在于路由重定向后其子路由只匹配
path
定义的路由名 导致路由别名/main/main
出现了路径不存在的情况。
- 处理办法很简单只需给重定向后的路由也起一个别名对应主外层路由的
/main/main
即可
export default [
{
path: 'specialized-subject',
name: 'specialized-subject',
alias: '/main', // 此处加上别名让其可以匹配
component: { render: h => h('router-view') },
redirect: {
name: 'specialized-subject-list'
},
meta: {
title: '专科管理列表'
},
children: [{
path: 'list',
name: 'specialized-subject-list',
component: () => import('@/views/specialized-subject'),
meta: {
title: '专科管理列表'
}
},
{
path: 'add',
name: 'specialized-subject-add',
component: () => import('@/views/specialized-subject/detail'),
meta: {
title: '专科详情'
}
},
{
path: 'detail/:id',
name: 'specialized-subject-detail',
component: () => import('@/views/specialized-subject/detail'),
meta: {
title: '专科详情'
}
},
{
path: 'service-set',
name: 'specialized-subject-service',
component: () => import('@/views/specialized-subject/serviceSet'),
meta: {
title: '服务配置'
}
},
{
path: 'tag-list',
name: 'tag-list',
component: () => import('@/views/specialized-subject/tag-list'),
meta: {
title: '标签列表'
}
}]
}
/* {
path: 'specialized-subject-detail',
name: 'specialized-subject-detail',
component: () => import('@/views/specialized-subject/detail'),
meta: {
title: '专科详情'
}
} */
]