Vue3 动态路由报错Cannot read property ‘apply‘ of undefined

添加动态路由之后报错

 

表象:

正常的路由页面(dashboard)可以进入,动态加载的路由进不去

分析:

之后通过 route.getRoutes() 查看路由信息 发现 component 里面和正常的有区别

 发现正常的component 加载为函数,动态加载的加载为 解析的值,然后百度查找

发现并修复loadView()

优化结果:

export const loadView = (view) => { // 路由懒加载
    return () => Promise.resolve(require(`@/views/${view}`).default)
}

完整的vue3 动态路由 actions.ts

/*
 * @Description:
 * @Author: ZY
 * @Date: 2020-12-25 15:03:52
 * @LastEditors: ZY
 * @LastEditTime: 2021-01-11 21:05:18
 */

import { ActionTree, ActionContext } from 'vuex'
import { RootState } from '@/store'
import { PermissionState } from './state'
import { Mutations } from './mutations'
import { PermissionMutationType } from './mutation-types'
import { getRoutersRequest } from '@/apis/user'
import { PermissionActionType } from './action-types'
import Layout from '@/layout/Index.vue'
type AugmentedActionContext = {
    commit<K extends keyof Mutations>(
      key: K,
      payload: Parameters<Mutations[K]>[1],
    ): ReturnType<Mutations[K]>
} & Omit<ActionContext<PermissionState, RootState>, 'commit'>

export const loadView = (view) => { // 路由懒加载
  return () => Promise.resolve(require(`@/views/${view}`).default)
}

export interface Actions {
    [PermissionActionType.ACTION_SET_ROUTES](
      { commit }: AugmentedActionContext
      , roles: string[]): void
}

function filterChildren(childrenMap) { // eslint-disable-line no-unused-vars
  let children = []
  childrenMap.forEach(el => {
    if (el.children && el.children.length) {
      if (el.component === 'ParentView') {
        el.children.forEach(c => {
          c.path = el.path + '/' + c.path
          if (c.children && c.children.length) {
            children = children.concat(filterChildren(c.children))
            return
          }
          children.push(c)
        })
        return
      }
    }
    children = children.concat(el)
  })
  return children
}
// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, type = false) { // eslint-disable-line no-unused-vars
  return asyncRouterMap.filter(route => {
    if (type && route.children) {
      route.children = filterChildren(route.children)
    }
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = loadView(route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route)
    } else {
      delete route.children
      delete route.redirect
    }
    return true
  })
}
export const actions: ActionTree<PermissionState, RootState> & Actions = {
  async [PermissionActionType.ACTION_SET_ROUTES](
    { commit }: AugmentedActionContext) {
    await getRoutersRequest().then((res) => {
      const rdata = JSON.parse(JSON.stringify(res.data))
      const rewriteRoutes = filterAsyncRouter(rdata, true)
      commit(PermissionMutationType.SET_ROUTES, rewriteRoutes)
    }).catch(err => {
      console.log(err)
    })
  }
}

 参考:如何解决 Critical dependency: the request of a dependency is an expression ？_c19910323的博客-CSDN博客