Package Exports

@uiw-admin/router-control
@uiw-admin/router-control/esm/index.js
@uiw-admin/router-control/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw-admin/router-control) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

菜单路由管理

在项目根目录的config/routes.json配置菜单路由

进行路由处理转换

进行路由权限处理

⚠️ 注意：

菜单路由文件优先级 json > ts > js
菜单路由使用js和ts文件时，如果文件中已经书写 import React from "react" 这句代码，在生成的 .uiw/routes.tsx 文件中不会再次进行生成

安装

npm i @uiw-admin/router-control --save # yarn add  @uiw-admin/router-control

路由控制组件参数

参数	必须	类型	默认值	说明
routeType	否	`"history" \| "hash" \| "browser"`	`hash`	路由模式
addModels	否	`(path: string) => Promise<{ default: any }>`	undefined
isAutoAuth	否	`boolean`	`true`	是否自动校验 "/" 的路由 token 是否存在
notLoginMenus	否	`string[] \| RegExp \| ((current: string) => boolean)`		控制哪些菜单是可以不用登录直接展示的
navigateTo	否	`string \| ((current: string) => boolean)`		判断 "/" 路径的权限重定向跳转地址

如果验证登录的字段不是token,可通过 TOKEN_NAME 自定义

⚠️注意：notLoginMenus 参数控制哪些菜单是可以不用登录直接展示的，当使用这个的时候的时候注意📢在不登录的情况下配置路由中 isAuth 参数无效，直接走notLoginMenus返回值判断(默认存在的路由权限"/" "*" "404" "403" "500" "/login")。当登录的情况下，在路由的权限没有存储本地的情况下，才会调用notLoginMenus进行判断当前路由权限

⚠️注意： routeType值为 history或browser 的时候需要设置 kktrc 配置 publicPath 值为 "/"

// kktrc.ts 
// ...
export default defaultConfig({
  publicPath:"/",
  // ...
})

不需要登录可以展示的菜单

// /src/index.tsx

// ...
import Control from '@uiw-admin/router-control'

export default ()=>{
    // ...
   return (
    <Control
      routeType="hash"
+     notLoginMenus={["/home"]}
    />
  )
}

自定义控制页面权限

需要更改两个文件

Control 组件参数

// /src/index.tsx

// ...
import Control from '@uiw-admin/router-control'

export default ()=>{
    // ...
   return (
    <Control
      routeType="hash"
+     isAutoAuth={false}
    />
  )
}

AuthPage 组件参数

# // /src/layouts/BasicLayout.tsx

# // ...
+ import AuthPage from "@uiw-admin/authorized"

export default ()=>{
    // ...
   return (
    #  authority 自定义控制页面权限 是否跳转登录页
+    <AuthPage authority={true} redirectPath="/login" >
     # // ...
+    </AuthPage>
  )
}

菜单路由参数

参数	必须	类型	默认值	说明
index	否	`boolean`	undefined	默认跳转(与`redirect`一起使用)
redirect	否	`string`	undefined	重定向当`index===true`生效
path	否	`string`	undefined	跳转路由
name	否	`string`	undefined	菜单名称
icon	否	`string \| React.React.Node`	undefined	菜单图标标
component	否	`string`	undefined	渲染组件的路径(如果是`403/404/500`的页面直接写 `403/404/500`,使用`@uiw-admin/plugins`里面的`routes`时会进行转换)
hideInMenu	否	`boolean`	无	是否隐藏菜单
isAuth	否	`boolean`	无	用于路由校验权限，注意：如果存在这个字段则以这个字段权限为准，不走其他校验
routes	否	`RoutersJSON[]`	无	子集路由 ,(参数与菜单路由参数一致)
navigate	否	`string`	无	自定义跳转(`"(navigate) => {console.log('navigate', navigate)}"`)

自定义菜单图标

注意：使用js或ts文件才有自定义功能

// config/routes.js

import { chat } from "@/assets"
import { Icon } from "uiw"
import React from "react"
const routes = [
  {
    "path": "/",
    "component": "@/layouts/BasicLayout",
    "routes": [
      {
        "index": true,
        "redirect": "/tableList"
      },
      {
        "path": "/tableList",
        "name": "查询表格",
        "component": "@/pages/TableList",
        "icon": <Icon type={chat} />,
      },
    ]
  }
]
export default routes

组件提供-路由跳转方法

navigate 由 react-router-dom的useNavigate hook 赋值生成
history 当 routeType="history" 才能使用，使用方式

// navigate 使用方式
navigate("/demo",{/** ... */})

// history 使用方式
history.push("/demo");
history.push("/demo?d=12", { some: "state" });
history.push(
  {
    pathname: "/demo",
    search: "?d=12",
  },
  {
    some: 1212,
  }
);
history.go(-1);
history.back();

routes.json案例

@ 指向 src 目录

[
  {
    "path": "/login",
    "component": "@/layouts/UserLayout"
  },
  {
    "path": "/",
    "component": "@/layouts/BasicLayout",
    "routes": [
      {
        "index": true,
        "redirect": "/tableList"
      },
      {
        "path": "/home",
        "name": "首页",
        "component": "@/pages/TableList",
        "icon": "home"
      },
      {
        "path": "/dom",
        "name": "子项",
        "icon": "copy",
        "routes": [
          {
            "path": "/dom/courses",
            "name": "Dashboard",
            "component": "@/pages/Dashboard"
          }
        ]
      },
      {
        "path": "/403",
        "name": "403",
        "hideInMenu": true,
        "component": "403"
      },
      {
        "path": "/500",
        "name": "500",
        "hideInMenu": true,
        "component": "500"
      },
      {
        "path": "/404",
        "name": "404",
        "hideInMenu": true,
        "component": "404"
      },
      {
        "path": "*",
        "name": "404",
        "component": "404"
      }
    ]
  }
]

案例

import React from "react";
import Control from '@uiw-admin/router-control';
export default ()=>{
  return (
    <Control
      routeType="hash"
       // addModels={(path) => import(`${path}`)}
    />
  )
}

贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.