ant design Pro 跳转路由--带参数的跳转

近期使用ant design Pro 项目中遇到跳转路由的问题,
一开始是遇到创建 跳转到创建页面的问题
这一篇文章干货满满哦
首先 我的跳转的路径是在modal中写的
上代码

routerRedux跳转路由 /router

import router from ‘umi/router’;
import { routerRedux } from ‘dva/router’;

不带参数的路由跳转

首先使用import { routerRedux } from 'dva/router';
modal中
在这里插入图片描述
然后在js中点击创建按钮进行跳转
在这里插入图片描述

带参数id的路由跳转
  • 同样 跳转路径还是写在modal中
  • 在这里插入图片描述
    首先在路由配置的地方也要改
    在这里插入图片描述
  • 7
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Ant Design Pro Vue 中,可以使用 ProLayout 组件来实现动态设置菜单高亮的效果。具体的实现步骤如下: 1. 在路由配置中,为需要高亮的菜单项添加一个`meta`字段,例如: ```javascript { path: '/dashboard', name: 'dashboard', component: () => import('@/views/dashboard/index.vue'), meta: { menuKey: 'dashboard' } } ``` 2. 在 ProLayout 组件中,使用`route`属性绑定路由信息,并在`menuHeaderRender`和`menuItemRender`中根据`meta`字段的值来动态设置菜单高亮的效果,例如: ```html <template> <pro-layout :route="route" :menu="menu"> <!-- 其他内容 --> </pro-layout> </template> <script> export default { data() { return { route: [], menu: { // 菜单配置 } } }, watch: { $route() { this.setMenuActiveKey() } }, created() { this.route = this.$router.options.routes this.setMenuActiveKey() }, methods: { setMenuActiveKey() { const menuKey = this.$route.meta.menuKey this.menu.defaultSelectedKeys = menuKey ? [menuKey] : [] this.menu.defaultOpenKeys = this.getDefaultOpenKeys(this.menu, menuKey) }, getDefaultOpenKeys(menu, key) { let defaultOpenKeys = [] for (const item of menu.children || []) { if (item.children) { defaultOpenKeys = defaultOpenKeys.concat(this.getDefaultOpenKeys(item, key)) } else if (item.key === key) { defaultOpenKeys.push(menu.key) } } return defaultOpenKeys }, menuHeaderRender({ menuHeaderRender }) { return menuHeaderRender && menuHeaderRender(this.menu) }, menuItemRender({ path, name, icon, children, meta }) { const { defaultSelectedKeys } = this.menu const isActive = defaultSelectedKeys.includes(meta.menuKey) return `<span class="menu-item ${isActive ? 'active' : ''}"> <router-link :to="{ path: '${path}' }"> ${icon ? `<icon type="${icon}" />` : ''} <span>${name}</span> </router-link> ${children ? `<span class="arrow"></span>` : ''} </span>` } } } </script> <style> .menu-item.active { background-color: #1890ff; color: #fff; } </style> ``` 这样,当路由跳转到`/dashboard`时,对应的菜单项就会高亮显示。注意,在`menuItemRender`中,你需要根据需要自定义菜单项的渲染方式,以适应你的业务需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值