升 element plus 路由报错：Invalid route component at extractComponentsGuards

[Tom9402]

• version:0.2.26
• playground demo:
  router/index.js

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
console.log(VueRouter)
/* Layout */
import Layout from '@/views/layout/Layout'
/* Router Modules */
/* import componentsRouter from './modules/components'*/

/** note: sub-menu only appear when children.length>=1
 **/

/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
*                                if not set alwaysShow, only more than one route under the children
*                                it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect           if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    roles: ['admin','editor']    will control the page roles (you can set multiple roles)
    title: 'title'               the name show in sub-menu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    noCache: true                if true, the page will no be cached(default is false)
    breadcrumb: false            if false, the item will hidden in breadcrumb(default is true)
    affix: true                  if true, the tag will affix in the tags-view
  }
**/
export const constantRouterMap = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: Vue.defineAsyncComponent(
          () => import('@/views/redirect/index')
        ),
      },
    ],
  },
  {
    path: '/login',
    component: Vue.defineAsyncComponent(() => import('@/views/login/index')),
    hidden: true,
  },
  {
    path: '/auth-redirect',
    component: Vue.defineAsyncComponent(
      () => import('@/views/login/authredirect')
    ),
    hidden: true,
  },
  {
    path: '/404',
    component: Vue.defineAsyncComponent(() => import('@/views/errorPage/404')),
    hidden: true,
  },
  {
    path: '/401',
    component: Vue.defineAsyncComponent(() => import('@/views/errorPage/401')),
    hidden: true,
  },
]

export const asyncRouterMap = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: Vue.defineAsyncComponent(
          () => import('@/views/dashboard/index')
        ),
        name: 'Dashboard',
        meta: { title: '工作台', icon: 'home', noCache: true, affix: true },
      },
    ],
  },
  {
    path: '/search',
    component: Layout,
    redirect: '/search/index',
    hidden: true,
    children: [
      {
        path: 'index',
        component: Vue.defineAsyncComponent(
          () => import('@/views/search/index')
        ),
        name: 'Search',
        meta: { title: 'search', icon: 'documentation' },
      },
    ],
  },
  {
    path: '/news',
    component: Layout,
    redirect: '/news/index',
    hidden: true,
    children: [
      {
        path: 'index',
        component: Vue.defineAsyncComponent(() => import('@/views/news/index')),
        name: 'News',
        meta: { title: 'news', icon: 'documentation' },
      },
    ],
  },
  {
    path: '/personalCenter',
    component: Layout,
    redirect: '/personalCenter/index',
    hidden: true,
    children: [
      {
        path: 'index',
        component: Vue.defineAsyncComponent(
          () => import('@/views/personalCenter/index')
        ),
        name: 'PersonalCenter',
        meta: { title: '个人中心', icon: 'documentation', affix: true },
      },
    ],
  },
  {
    path: '/customer',
    component: Layout,
    redirect: 'noredirect',
    name: 'Customer',
    meta: {
      title: '营销',
      icon: 'customer',
      permissionCode: ['001_003', '002_003'],
    },
    children: [
      {
        path: 'customerList',
        component: Vue.defineAsyncComponent(
          () => import('@/views/customer/customerList')
        ),
        name: 'CustomerList',
        meta: { title: '客户', noCache: true, permissionCode: ['001_003'] },
      },
      {
        path: 'contract',
        component: Vue.defineAsyncComponent(
          () => import('@/views/customer/contract')
        ),
        name: 'Contract',
        meta: { title: '合同', noCache: true, permissionCode: ['002_003'] },
      },
      {
        path: 'bill',
        component: Vue.defineAsyncComponent(
          () => import('@/views/customer/bill')
        ),
        name: 'Bill',
        meta: { title: '账单', noCache: true, permissionCode: ['015_008'] },
      },
    ],
  },
  {
    path: '/logistics',
    component: Layout,
    redirect: '/logistics',
    meta: { title: 'logistics', icon: 'van', permissionCode: ['003_003'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/logistics/index')
        ),
        name: 'Logistics',
        meta: { title: '物流', icon: 'van', permissionCode: ['003_003'] },
      },
    ],
  },
  {
    path: '/sample',
    component: Layout,
    redirect: '/sample',
    meta: { title: 'sample', icon: 'sample', permissionCode: ['004_002'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/sample/index')
        ),
        name: 'Sample',
        meta: { title: '样本', icon: 'sample', permissionCode: ['004_002'] },
      },
    ],
  },
  {
    path: '/experiment',
    component: Layout,
    redirect: 'noredirect',
    name: 'Experiment',
    meta: {
      title: 'experiment',
      icon: 'experiment',
      permissionCode: ['005_003', '006_003'],
    },
    children: [
      {
        path: 'nucleicAcid',
        component: Vue.defineAsyncComponent(
          () => import('@/views/experiment/nucleicAcid')
        ),
        name: 'NucleicAcid',
        meta: { title: '核酸', noCache: true, permissionCode: ['005_003'] },
      },
      {
        path: 'library',
        component: Vue.defineAsyncComponent(
          () => import('@/views/experiment/library')
        ),
        name: 'Library',
        meta: { title: '文库', noCache: true, permissionCode: ['006_003'] },
      },
    ],
  },
  {
    path: '/sequencing',
    component: Layout,
    redirect: '/sequencing',
    meta: {
      title: 'sequencing',
      icon: 'sequencing',
      permissionCode: ['007_003'],
    },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/sequencing/index')
        ),
        name: 'Sequencing',
        meta: {
          title: '测序',
          icon: 'sequencing',
          permissionCode: ['007_003'],
        },
      },
    ],
  },
  {
    path: '/analysis',
    component: Layout,
    redirect: '/analysis',
    meta: { title: 'analysis', icon: 'coding', permissionCode: ['008_003'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/analysis/index')
        ),
        name: 'Analysis',
        meta: { title: '分析', icon: 'coding', permissionCode: ['008_003'] },
      },
    ],
  },
  {
    path: '/report',
    component: Layout,
    redirect: '/report',
    meta: { title: 'report', icon: 'report', permissionCode: ['009_001'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/report/index')
        ),
        name: 'Report',
        meta: { title: '报告', icon: 'report', permissionCode: ['009_001'] },
      },
    ],
  },
  {
    path: '/verify',
    component: Layout,
    redirect: '/verify',
    meta: { title: 'verify', icon: 'report', permissionCode: ['013_001'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/verify/index')
        ),
        name: 'Verify',
        meta: { title: '审核', icon: 'edit', permissionCode: ['013_001'] },
      },
    ],
  },
  {
    path: '/charts',
    component: Layout,
    name: 'Charts',
    meta: {
      icon: 'chart',
      permissionCode: ['014_001'],
    },
    children: [
      {
        path: 'line',
        component: Vue.defineAsyncComponent(
          () => import('@/views/charts/line')
        ),
        name: 'LineChart',
        meta: { title: '统计', noCache: true },
      },
    ],
  },
  {
    path: '/set',
    component: Layout,
    redirect: '/feature',
    meta: { title: 'set', icon: 'set', permissionCode: ['010'] },
    children: [
      {
        path: 'sample',
        component: Vue.defineAsyncComponent(
          () => import('@/views/set/samplesSetting')
        ),
        name: 'SamplesSetting',
        meta: {
          title: '采样设置',
          noCache: true,
          permissionCode: ['010_001', '010_002', '010_003', '010_011'],
        },
      },
      {
        path: 'sales',
        component: Vue.defineAsyncComponent(
          () => import('@/views/set/salesSetting')
        ),
        name: 'SalesSetting',
        meta: { title: '销售设置', noCache: true, permissionCode: ['010_005'] },
      },
      {
        path: 'options',
        component: Vue.defineAsyncComponent(
          () => import('@/views/set/optionsSetting')
        ),
        name: 'OptionsSetting',
        meta: {
          title: '选项设置',
          noCache: true,
          permissionCode: [
            '010_004',
            '010_006',
            '010_009',
            '010_008',
            '010_007',
            '010_009',
            '010_018',
          ],
        },
      },
      {
        path: 'experiment',
        component: Vue.defineAsyncComponent(
          () => import('@/views/set/experimentSetting')
        ),
        name: 'ExperimentSetting',
        meta: {
          title: '实验设置',
          noCache: true,
          permissionCode: ['010_012', '010_013', '010_014', '010_015'],
        },
      },
      {
        path: 'analysis',
        component: Vue.defineAsyncComponent(
          () => import('@/views/set/analysisSetting')
        ),
        name: 'AnalysisSetting',
        meta: { title: '分析设置', noCache: true, permissionCode: ['010_016'] },
      },
    ],
  },
  /* 华丽丽的分割线*/

  { path: '*', redirect: '/404', hidden: true },
]

export const asyncBackendRouterMap = [
  {
    path: '/userAuth',
    component: Layout,
    redirect: '/userAuth',
    meta: { title: 'userAuth', icon: 'user', permissionCode: ['011_001'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/userAuth/index')
        ),
        name: 'userAuth',
        meta: { title: '用户权限', icon: 'user', permissionCode: ['011_001'] },
      },
    ],
  },
  {
    path: '/statistics',
    component: Layout,
    redirect: '/statistics',
    meta: { title: 'statistics', icon: 'data', permissionCode: ['011_002'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/statistics/index')
        ),
        name: 'statistics',
        meta: { title: '数据管理', icon: 'data', permissionCode: ['011_002'] },
      },
    ],
  },
  {
    path: '/instrument',
    component: Layout,
    redirect: '/instrument',
    meta: {
      title: 'instrument',
      icon: 'instrument',
      permissionCode: ['011_003'],
    },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/instrument/index')
        ),
        name: 'instrument',
        meta: {
          title: '仪器设备',
          icon: 'instrument',
          permissionCode: ['011_003'],
        },
      },
    ],
  },
  {
    path: '/analysisModule',
    component: Layout,
    redirect: '/analysisModule',
    meta: {
      title: 'analysisModule',
      icon: 'module',
      permissionCode: ['011_004'],
    },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/analysisModule/index')
        ),
        name: 'analysisModule',
        meta: {
          title: 'analysisModule',
          icon: 'module',
          permissionCode: ['011_004'],
        },
      },
    ],
  },
  {
    path: '/systemSetting',
    component: Layout,
    redirect: '/systemSetting',
    meta: { title: 'systemSetting', icon: 'set', permissionCode: ['011_005'] },
    children: [
      {
        path: '',
        component: Vue.defineAsyncComponent(
          () => import('@/views/systemSetting/index')
        ),
        name: 'systemSetting',
        meta: {
          title: 'systemSetting',
          icon: 'set',
          permissionCode: ['011_005'],
        },
      },
    ],
  },
]

export default VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  scrollBehavior: () => ({
    top: 0,
  }),
  routes: constantRouterMap,
})

permisson.js

import router from './router'
import store from './store'
// import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { asyncBackendRouterMap } from '@/router'
import { getRole } from '@/utils/auth'
import { getAuthInfo, deleteAuthInfo } from '@/utils/index'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

// permission judge function
/* function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('sagene') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}*/

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
let backendRouterMap = asyncBackendRouterMap.map((item) => item.path)
asyncBackendRouterMap.forEach((item) => {
  if (item.path === '/statistics') {
    return (backendRouterMap = backendRouterMap.concat(
      item.children.map((itm) => '/statistics/' + itm.path)
    ))
  }
})

// eslint-disable-next-line space-before-function-paren
router.beforeEach(async (to, from, next) => {
  NProgress.start() // start progress bar

  console.log(store.getters)
  console.log(getAuthInfo())
  const authInfo = getAuthInfo()

  if (authInfo) {
    // determine if there has token
    console.log(to.path)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0

      authInfo.user.nickname
        ? store.dispatch('ChangeNickname', authInfo.user.nickname)
        : alert(`${authInfo.user.nickname}不存在`)
      store.dispatch('ChangeShowFrontend', !backendRouterMap.includes(to.path))
      store.dispatch(
        'ChangeShowBackendBtn',
        authInfo.permission_category.some((a) => /^011_/.test(a))
      )
      store.dispatch('ChangeShowSimulateBtn', authInfo.is_impersonate)

      // const hasRoles = getRole()
      if (hasRoles) {
        console.log('roles存在')
        console.log(to)
        /* 路由发生变化修改页面title */
        if (to.meta.title) {
          document.title = 'iSagene Cloud - ' + to.meta.title
        } else {
          document.title = 'iSagene Cloud'
        }
        console.log(
          'toooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo'
        )
        console.log({ to, from })
        console.log({ ...to })
        if (to.matched.length === 0) {
          // next({ path: to.path })
          next()
          setTimeout(() => {
            // location.reload()
          }, 10)
        } else {
          next()
        }
      } else {
        console.log('roles不存在！！！！！！！！！')
        console.log(JSON.parse(localStorage.getItem('Permission-Route')))
        console.log(getRole())
        if (getRole()) {
          // 从cookie中获取role,并生成路由
          store.dispatch('getRoleFromCookie').then(
            () => {
              // 如果用户有权限, 但管理员修改了权限
              const shouldGotoFront =
                backendRouterMap.includes(to.path) &&
                !['011_001', '011_002', '011_003', '011_004', '011_005'].some(
                  (a) => authInfo.permission_category.includes(a)
                )
              const dataForGenerateRoutes = {
                isAdmin: authInfo.is_admin,
                permission: authInfo.permission_category,
                isFrontEndRouter:
                  shouldGotoFront || !backendRouterMap.includes(to.path),
              }
              console.log('从localStorage中获取的dataForGenerateRoutes')
              console.log(dataForGenerateRoutes)
              store
                .dispatch('GenerateRoutes', dataForGenerateRoutes)
                .then(() => {
                  // 根据roles权限生成可访问的路由表
                  // router.addRoutes(JSON.parse(localStorage.getItem('Add-Routers'))) // 动态添加可访问路由表
                  router.addRoute(store.getters.addRouters)
                  next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                })
            },
            (error) => {
              console.log(error)
              next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
              NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
            }
          )
        } else {
          deleteAuthInfo()
          next({ path: '/' })
          NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }

  if (!window.localStorage) {
    console.log('浏览器不支持localStorage')
  }

  let size = 0
  Object.values(window.localStorage).forEach((item) => {
    size += item.length
  })

  const sizeToBi = (size / 1024).toFixed(2)
  if (sizeToBi > 4940) {
    alert('当前localStorage容量为' + sizeToBi + 'KB' + authInfo.toString())
  }
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})

• your description:

Error: Invalid route component
    at extractComponentsGuards (vue-router.esm-bundler.js:1987:1)
    at vue-router.esm-bundler.js:3143:1