Naughty Program Manipulator

    @uiw-admin/router-control
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.19 • Public • Published

    菜单路由管理

    npm version

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

    1. 进行路由处理转换
    2. 进行路由权限处理

    ⚠️ 注意:

    1. 菜单路由文件优先级 json > ts > js
    2. 菜单路由使用jsts文件时,如果文件中已经书写 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值为 historybrowser 的时候需要设置 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 React.ReactNode 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)}")
    side boolean 控制菜单子路由进行菜单展示
    hiddenMainMenu boolean 控制是否隐藏左侧菜单栏

    自定义菜单图标

    注意:使用jsts文件才有自定义功能

    // 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

    组件提供-路由跳转方法

    1. navigatereact-router-domuseNavigate hook 赋值生成
    2. historyrouteType="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.

    Install

    npm i @uiw-admin/router-control

    DownloadsWeekly Downloads

    60

    Version

    5.3.19

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    30

    Last publish

    Collaborators

    • wcjiang