添加动态路由之后报错
表象:
正常的路由页面(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博客