Vue使用路由别名导致页面跳转到匹配不到的路由问题

  • 最近测试说线上页面有概率跳转到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: '专科详情'
    }
  } */
]
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容