umi3合集

Yssai

已于 2023-08-01 22:52:12 修改

阅读量134

点赞数

文章标签：前端 javascript

于 2023-08-01 21:46:26 首次发布

本文链接：https://blog.csdn.net/Yssai/article/details/132051463

版权

1.优化热更新速度，MFSU

在.umirc.ts 或 config/config.ts中添加以下代码

import { defineConfig } from "umi";

export default defineConfig({
    mfsu:{},
    webpack5:{},
    // mfsu: { production: { output: '.mfsu-production' } },  //针对生产环境
})

2.路由

2.1 配置子路由

路由中添加routes

export default [
    {
        path: '/home',
        component: '@/pages/home/index',
        routes: [
                { path: '/home/list', component: '@/pages/home/list/index' }
            ],
     },
];

2.2 路由重定向

使用redirect进行重定向

export default [
  { path: '/', redirect: "/home" },
  {
    path: '/home',
    component: '@/pages/home/index',
    routes: [{ path: '/home/list', component: '@/pages/home/list/index' }],
  },
];

2.3 路由鉴权

使用wrappers进行鉴权
在src/wrappers/auth编写代码

{ 
    path: '/user', 
    component: '@/pages/user/index',
    wrappers:['@/wrappers/auth',]
 },

import { Redirect } from 'umi';

const AuthRouter = (props: any) => {
  const isLogin = false; //此处的值自己确定
  return isLogin ? <div>{props.children}</div> : <Redirect to="/" />;
};

export default AuthRouter;