Giter VIP home page Giter VIP logo

vite-react-demo's Introduction

vite-react-demo

一个使用vitereact-router v6react-redux的小demo,支持简易的路由权限(路由过滤)

开始

安装依赖

yarn

启动开发服务器

yarn run dev

配置


路由配置

路由文件在src\routes\index.tsx,系统路由和侧边栏菜单根据路由文件自动生成

比如:

export const LayoutRoute: RouteItem = {
  path: "/",
  element: 'LAYOUT',
  name: 'Layout',
  title: 'Layout',
  children: [
    {
      path: '/home',
      element: '@/pages/Home/index',
      title: '首页',
      name: 'Home',
      icon: 'HomeFilled',
    },
    {
      path: '/system',
      title: '系统',
      name: 'System',
      icon: 'SettingFilled',
      redirect: '/system/userManager',
      children: [
        {
          index: true,
          path: '/system/userManager',
          element: '@/pages/System/UserManager/index',
          title: '用户设置',
          name: 'UserManager',
        },
        {
          path: '/system/roleManager',
          element: '@/pages/System/RoleManager/index',
          title: '角色设置',
          name: 'RoleManager',
        },
      ],
    },
  ],
}

path

路由路径,推荐都使用绝对路径

element

  • 组件路径,目前只支持使用@别名,如果需要支持其他路径,例如相对路径,请自行适配,相关逻辑在src\App.tsx,使用了Vite的Glob 导入,在渲染路由的时候,使用React.lazy包裹成懒加载组件,
  • 如果element === 'LAYOUT',表示的是主布局组件,src\Layout\index.tsx

权限

  • src\App.tsx中进行路由过滤,请求权限code的时候会展示一个loading

vite-react-demo's People

Contributors

xuxiake2017 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.