vue-vben-admin
vue-vben-admin copied to clipboard
路由缓存问题
⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭
- [ ] 已阅读 文档.
- [ ] 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
- [ ] 已在 Issues 中搜索了相关的关键词
- [ ] 不是 ant design vue 组件库的 Bug
描述 Bug
如果一个添加页面和修改页面公用一个页面,动态加载路由的时候使用同一个name会导致添加页面 “404 抱歉,您访问的页面不存在 ” 如果公用一个页面动态加载路由时使用不同的name 最终导致 编辑页面缓存失效
复现 Bug
如果一个添加页面和修改页面公用一个页面,动态加载路由的时候使用同一个name会导致添加页面 “404 抱歉,您访问的页面不存在 ” 如果公用一个页面动态加载路由时使用不同的name 最终导致 编辑页面缓存失效
建议在 routeHelper.ts 文件中 修改 代码为
function dynamicImport(
dynamicViewsModules: Record<string, () => Promise<Recordable>>,
component: string,
item: AppRouteRecordRaw,
) {
const keys = Object.keys(dynamicViewsModules);
const matchKeys = keys.filter((key) => {
const k = key.replace('../../views', '');
const startFlag = component.startsWith('/');
const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
const startIndex = startFlag ? 0 : 1;
const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
return k.substring(startIndex, lastIndex) === component;
});
if (matchKeys?.length === 1) {
const matchKey = matchKeys[0];
const dynamicViewsModule = dynamicViewsModules[matchKey];
return dynamicViewsModule().then((comp) => {
return {
...comp.default,
name: item.name,
};
});
} else if (matchKeys?.length > 1) {
warn(
'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
);
return;
} else {
warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!');
return EXCEPTION_COMPONENT;
}
}
系统信息
- 操作系统:
- Node 版本:
- 包管理器 (npm/yarn/pnpm) 及其版本:
@laoyingwei 能否录制个视频展示下你说的bug 或者贴个代码
两个路由公用一个页面,修改页面的name值写成 AccountEdit 导致和文件.vue的name值不一致,导致缓存会失效,如果改了 routeHelper.ts 中 dynamicImport 动态设置页面名称就没有这个问题
只是本地开发的时候会出现这个问题 对吧? 部署到线上的时候正常吧?
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days