前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Umi动态修改路由跳转redirect配置

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

作者头像
德顺
发布于 2022-02-23 06:18:18
发布于 2022-02-23 06:18:18
3.5K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

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

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

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

app.tsx 中增加下面代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 是用来组织路由的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue路由详解(知识点重温)
  在router文件夹的index.js文件的new VueRouter({routers:[{ path..}]})里的配置
隔壁老陈
2023/03/09
7590
Umi&React动态修改title标题
在调整好菜单后,又发现一个问题,打开页面不显示标题,点击菜单的时候才会正常显示标题,再次点击当前菜单,标题又变的不太对了。
德顺
2021/07/12
6.1K0
【React+Typescript+Antd】全局路由跳转
React在Typescript里的路由跳转示例: 第一步,设置路由配置文件(示例在routeMap.ts文件中配置)。 第二步,在页面中根据不同情况对页面路由进行引用(见AuthHOC.tsx) 第三步,在APP中引用路由页面(见:APP.tsx) 1、APP.tsx import React from 'react'; import {BrowserRouter as Router, Switch} from 'react-router-dom' import {routerConfig} from '
毛大姑娘
2020/09/10
3K0
Vue-Router 简易实现
# 需求分析 作为一个插件存在:实现VueRouter类和install方法 实现两个全局组件:router-view用于显示匹配组件内容,router-link用于跳转 监控url变化:监听hashchange或popstate事件 响应最新url:创建一个响应式的属性current,当它改变时获取对应组件并显示 # 实现 # 作为一个插件存在 // cvue-router.js let Vue; // 1. 实现一个插件:挂载$router class CVueRouter { constructo
Cellinlab
2023/05/17
2120
Vue Router 实现动态路由和常见问题解决方案
个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表。常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单。
Ryoma
2022/04/02
3.5K0
Uni&antd的ProLayout布局动态菜单实现及踩坑记录
ProLayout 高级布局是 Ant Design Pro 中的一个组件,可以提供一个标准又不失灵活的中后台标准布局,同时提供一键切换布局形态,自动生成菜单等功能。页面中需要承载内容时,可以使用 ProLayout 来减少布局成本。
德顺
2021/07/09
14.8K5
写给前端新人:从 0到1 搭建一个前端项目,都需要做什么?
本案例使用脚手架 create-react-app 初始化了项目。此脚手架有利有弊吧,项目目录结构简洁,不需要太关心 webpack 令人头疼的配置;弊端在于,脚手架确实有些庞大,构建时间在 4mins 左右。各位看官择优选择吧,也可以完全自己搭建一个项目。
zz_jesse
2021/06/01
5.4K0
React 系列 - 写出优雅的路由
自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点。不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合、与标题耦合、与“面包屑”耦合等等,因此很少有拆箱即用的完整方案,多多少少得二次加工一下。
捷义
2019/02/18
1K0
后端管理系统开发(二):路由篇
很久很久……以前,我们开始了vue-admin-pro之旅。通过 后端管理系统开发(一):登录篇 ,实现登录功能,我们打开了后台管理系统的大门。本节是路由篇的讲解,不管管理系统如何简单,都少不了路由,所以,学习这一节,很有必要。不过呢,对于我们来说,路由就是菜单。
冯文议
2021/04/14
1.2K0
后端管理系统开发(二):路由篇
改变渲染顺序实现按需加载,主要可以从以下几个方面入手:
当你访问http://localhost:3000/app/list/testpage时,Next.js 的处理顺序是:
用户1232103
2024/12/14
1410
react-router/v5之Router、Route、Redirect、Switch源码解析
首先,简单概括一下Router、Route、Redirect、Switch的作用:
用户4619307
2022/09/27
1.9K0
Vite2+React+TypeScript:搭建企业级轻量框架实践
Hello大家好,前段时间写了个Vue3的工程项目用起来还不错,其实老早前就想把它移植过来React这边,奈何工作比较忙一直拖到现在,才陆陆续续把杂七杂八的模块补充好。
南山种子外卖跑手
2022/03/27
2.2K0
Vite2+React+TypeScript:搭建企业级轻量框架实践
从零开始搭建一个React TypeScript项目
最近开始使用 React 和 TypeScript 开发项目了,顺便整理一下 react-ts 项目的创建过程。
德顺
2021/07/06
7K0
从零开始搭建一个React TypeScript项目
站在umi的肩膀上做项目1
---- 「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」 最近想要用阿里的umi价格架构做一个项目,在这里📝记录一下。如果哪里不足希望大佬指正。 这是创建Umi项目的文章 想要添加自己的页面 路由 首先要找到路由router的配置,我们发现有一个路由配置文件routes.ts,但是发现这个并不是真正的路由配置。 在umi文档中提到,文档链接: 如果项目的配置不复杂,推荐在 .umirc.ts 中写配置; 如果项目的配置比较复杂,可以将配置写在 config/config
用户4793865
2023/01/12
6100
【路由】:路由那些事——上
前端三杰 Angular、React、Vue 都推荐单页面应用 SPA 开发模式,它们都有自己的前端路由解决方案:
WEBJ2EE
2021/04/07
1.9K0
Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
import NotFound from "@/views/Error/404";
授客
2020/02/18
3.1K0
干货!我是如何在React-Router 6.10最新版本实现约定式路由的
最近在学习react-router v6.10+,由于新项目又要配置路由,长期配置路由这种重复性工作真是非常xx。而我有幸曾接触过小程序开发和和NextJS,一向对于这种约定式路由非常向往,所以寻思了一下,能否自己手搓一个?
源心锁
2023/04/27
4.5K0
干货!我是如何在React-Router 6.10最新版本实现约定式路由的
vue 项目中自定义布局与左侧菜单及路由跳转功能的实现(简易版)
在 Vue项目中,实现自定义布局与左侧菜单及路由跳转功能,对于笔者这种不是精通前端开发的同学一向是比较困难的。以前都是在开源项目的基础上扩展自己的功能,比较著名的开源项目 vue-element-admin 就是开源项目的作者通过定义实现的左侧菜单和路由跳转的。不过 vue-element-admin 项目使用的 vue 版本还停留在 vue2,现在市场上新项目普遍都用 vue3 技术了, 但是 vue-element-admin 项目也相应地出了 Vue3 版本,对应的 gitee 仓库地址为:https://gitee.com/youlaiorg/vue3-element-admin.git
用户3587585
2024/05/10
2.1K0
vue 项目中自定义布局与左侧菜单及路由跳转功能的实现(简易版)
Vue路由History模式分析
Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以启用history模式。
WindRunnerMax
2020/10/26
1.2K0
react项目实战教程(react项目实战)
React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件
全栈程序员站长
2022/07/28
2.7K0
react项目实战教程(react项目实战)
推荐阅读
相关推荐
vue路由详解(知识点重温)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档