umi --api

最新推荐文章于 2024-07-13 17:29:16 发布

zvapour

最新推荐文章于 2024-07-13 17:29:16 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/qq_36303110/article/details/113127798

版权

本文主要介绍了umi框架中的API使用，包括动态组件加载、路由管理等关键功能。动态加载组件能够提高首屏加载速度，减少不必要的资源占用。umi的路由API提供了Link、navLink、Prompt、withRouter以及一系列hooks，如useHistory、useLocation和useParams，方便进行路由操作和状态管理。

摘要由CSDN通过智能技术生成

API

基本API

dynamic动态加载组件(通常搭配import语法)
使用场景：组件体积太大，不适合直接计入bundle，以免影响首屏加载速度。例如：某组件 HugeA 包含巨大的实现 / 依赖了巨大的三方库，且该组件 HugeA 的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic 就该上场了。

// 封装异步组件  AsyncHugeA
import {
    dynamic } from 'umi';
export default dynamic({
   
  loader: async function(){
   
    const {
    default: HugeA } = await import(/* webpackChunkName: "" */'path/to/component')
    return HugeA
  }
})

// 使用异步组件
import React from 'react';
import AsyncHugeA from './AsyncHugeA';
// 像使用普通组件一样即可
// dynamic 为你做:
// 1. 异步加载该模块的 bundle
// 2. 加载期间 显示 loading（可定制）
// 3. 异步组件加载完毕后，显示异步组件
export default () => {
   
  return <AsyncHugeA />;
}

history
des: 1.获取当前路由信息;2.用于路由跳转;3.用于路由监听

import {
    history } from 'umi';
// 路由信息
console.log(history.action)   // 跳转方式
console.log(history.location)  // 携带的参数等 

// 路由跳转  （push、go、goBack、replace）
history('/list')
history.push({
   
  pathname:'/list',
  query:{
   
    a