ant design pro 路由的基础用法

router.config.js 中路由的基础设置

{
  path: '/hello',
  icon: 'block',
  name: 'Hello',
  Routes: ['src/pages/Authorized'],
  authority: ['free', 'vip'],  // 权限
  routes: [
    {
      path: '/hello/a',
      name: '页面a',
      component: './Hello/PageA',
    },
    {
      path: '/hello/b',
      name: '页面b',
      component: './Hello/PageB',
    },
  ],
},

路由跳转 | 路由传值

window.open(`/home/...?name='liu'&&age=23`)  // 页面跳转

umi 自带的路由跳转

// index.js 文件
import Link form 'umi/link'

<Link to="/hello/world" target="blank">点击跳转</Link>

// index.js 文件
import { router } from 'umi'

router.push(url)

重定向路由

// router.config.js 文件
{
  path: '/hello',
  name: 'hello',
  component: './Hello',
  routes: [
    {
      path: '/hello',  // 重定向路由
      redirect: '/hello/world_1',
    },
    { 
      // 省略 name 属性，为不显示
      path: '/hello/world_1',
      component: './Hello/World1',
    },
    {
      path: '/hello/world_2',
      component: './Hello/World2',
    },
  ],
}

页面获取路由信息

history.location.pathname  // 主要用于获取 router.config.js 中设置的路由
history.location.query  // 可以拿到 url 中的信息

const { location, match } = this.props  // 在构造函数 constructor(props) 中获取时 直接是 props
location.pathname  // 获取当前路由（完整），如 /hello/world_1
match.path  // 父级路由，如 /hello