首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Umi动态修改路由跳转redirect配置

Umi动态修改路由跳转redirect配置

作者头像
德顺
发布2022-02-23 14:18:18
2.8K0
发布2022-02-23 14:18:18
举报
文章被收录于专栏:前端资源前端资源

Umi 的路由跳转可以在配置文件中配置,但如果需要跳转的 path 路径不固定,就比较麻烦了。

还在 Umi 提供了运行时配置,可以通过 patchRoutes 方法在运行时对路由进行修改。

比如我要修改 redirect 为第一个有效的路由 path 。

app.tsx 中增加下面代码:

export function patchRoutes({ routes }: { routes: IRoute[] }) {
  let pagesRoutes = routes[0].routes;
  const serverRoutes = buildRoutes(serviceRoutes);
  serverRoutes.map((route: any) => {
    pagesRoutes?.push(route);
  });
  // 修改重定向配置
  if (pagesRoutes && pagesRoutes[1] && pagesRoutes[1].routes) {
    pagesRoutes[0] = {
      ...pagesRoutes[0],
      path: '/',
      redirect: pagesRoutes[1].routes[0].path,
    };
  }
  routes[0].routes = pagesRoutes;
}

其中 buildRoutes 是用来组织路由的:

function buildRoutes(routes: any) {
  return (routes || []).map((route: any) => {
    if (route.children && route.children.length > 0) {
      return {
        path: route.component,
        name: route.title,
        icon: route.icon,
        // 精准匹配默认false
        exact: false,
        routes: buildRoutes(route.children),
      };
    }
  });
}

可以根据自己的需要进行相应的修改。

未经允许不得转载:w3h5 » Umi动态修改路由跳转redirect配置

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档