antd中点击按钮实现路由

最新推荐文章于 2024-01-26 16:09:20 发布

Abin0406

最新推荐文章于 2024-01-26 16:09:20 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： antd umi router 路由 Link

本文链接：https://blog.youkuaiyun.com/bin_zi_123/article/details/84982405

在antd pro 2.0开发中，通过umi实现从页面A点击按钮跳转到页面B并传递属性值。本文介绍了两种方法：1) 使用<Link />标签，通过to属性指定路由并利用URL传参；2) 使用umi的router.push，将参数放入query或state中。在B页面，可以通过location获取传入的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在基于antd pro 2.0实现前端开发，遇到需要从页面A点击按钮跳转到页面B，并且需要将页面A中的某些属性值一起传递给B页面使用。在网上查了好久，自己也尝试了很多方式，总结出以下两种方式可行，两种方式均借助于umi实现。

注：两种方式实现的路由，必须将路由链接添加到antd组件config/router.config.js中，如下示：

export default [
   {
    path: '/',
    component: '../layouts/BasicLayout',
    Routes: ['src/pages/Authorized'],
    authority: ['admin', 'user'],
    routes: [
      // dashboard
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          {
            path: '/dashboard/analysis',   //子路径值必须以父路径为前缀
            name: 'analysis',  //若不想在菜单中显示，name可不配置
            component: './Dashboard/Analysis',  //为pages下页面路径
          }
        ],
      },
    ]
  },
];

方式一，在A页面使用<Link />标签实现路由

1. 导入umi组件