vue-vben-admin icon indicating copy to clipboard operation
vue-vben-admin copied to clipboard

路由缓存问题

Open laoyingwei opened this issue 2 years ago • 3 comments

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 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 avatar Nov 09 '23 07:11 laoyingwei

@laoyingwei 能否录制个视频展示下你说的bug 或者贴个代码

wangjue666 avatar Nov 09 '23 08:11 wangjue666

image image

两个路由公用一个页面,修改页面的name值写成 AccountEdit 导致和文件.vue的name值不一致,导致缓存会失效,如果改了 routeHelper.ts 中 dynamicImport 动态设置页面名称就没有这个问题

laoyingwei avatar Nov 09 '23 09:11 laoyingwei

只是本地开发的时候会出现这个问题 对吧? 部署到线上的时候正常吧?

wangjue666 avatar Nov 09 '23 09:11 wangjue666

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

anncwb avatar Apr 09 '24 01:04 anncwb