整体参考的Geeker Admin
记录自己开发的一些问题, 不完全是坑, 纯觉得自己有必要记录一下的内容
TBC

路由鉴权

权限分配是通过后端根据不同用户的token返回不同权限的路由list

路由刷新白屏

动态进来的路由 遇到初次进入页面白屏问题
经查询 是transition标签的影响
去掉transition的mode 可以解决问题
底层原因不详
issue link

pathMatch路由配置

不能配置成redirect 404
会导致刷新页面直接进入 404
要直接配置成懒加载404的component

  // Resolve refresh page, route warnings
  {
    path: "/:pathMatch(.*)*",
    component: () => import('@/views/ErrorView.vue')
  }

autoimport Icon

之前总结了auto Import icon的方式, 提到过相关插件的设计原理是静态解析路径的, 无法应用于动态导入,
传送门
所以在动态添加路由 生成权限菜单的时候, 需要先单独逐个手动引入icon, 将路由里的meta.icon与手动引入的icon组件进行映射, 再在渲染处理路由的时候 转成icon组件
其他解决方案:
整体放弃autoimport 使用自己封装svg icon的方案
参考示例

动态添加路由

使用router.addRoute添加
两种类型的路由分开处理

类型1 - 全屏展示的路由
直接添加

类型2 - 嵌套在layout的main区域的
需要作为layout的子路由进行添加, 在静态路由里需要单独配置好layout, 添加的时候需要传入参数1,(父级route的name)
router.addRoute('layout', route)

菜单渲染

注意要使用处理过component和icon的路由进行菜单渲染

element-plus

虚拟表格 jsx 动态组件

el-table-v2 , 用的是jsx, jsx不能用<component>, 动态渲染组件的时候 需要用 h(resolveDynamicComponent(component)) 参考issue

有的资料显示可以用h(resolveComponent('componentName')) 但这种似乎只能渲染组件内部注册 或者全局注册过的组件

setup script

动态调用函数

vue2

this[someMethod] //*

vue3
因为setup script拿不到组件this ..把单独定义的函数 放到一个对象里.. 通过对象映射调用

const method1 = ...
const method2 = ...
const actions = { method1, method2 }

actions[method1] //*