umi路由懒加载和权限验证（基于React）

一、路由懒加载

在 umirc.ts 配置文件中，添加以下配置即可：

{dynamicImport: {loading: '@/components/Loading',},
}

其中，@/components/Loading 是我们自己创建的 loading 组件的路径。

二、路由权限验证

首先，在配置路由时，需要配置以下属性：

{// 关注path: '/friend', component: '@/pages/friend',// 模拟导航守卫wrappers: ['@/components/Auth']
},

然后，在 wrappers 属性对应的组件中，可以对用户的登录状态进行判断：

import React, { useEffect } from 'react';
import { history } from 'umi';
export default function Auth(props) {useEffect(() => {const token = localStorage.token;if (!token) {// 没有 tokenhistory.push('/login')}}, [])return <div>{props.children}</div>;
}

umi路由懒加载和权限验证（基于React）相关推荐

Code Splitting代码分包（路由懒加载）
code split代码分包(路由懒加载) 前言,在应用打包结果过大时,按照设置的规则打包到不同的bundle中,提高应用响应速度.也就是当一个页面进行加载的时候如果太慢,那么你就可以考虑对工程进行 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
Vue 路由懒加载和动态加载
什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间: 路由懒加载的原理? 底层是一个 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
14 代码分割之lazy:Suspense与路由懒加载
lazy内置方法 Suspense内置组件 lazy是React提供的懒(动态)加载组件的方法,React.lazy() 能减少打包体积.延迟加载首屏不需要渲染的组件依赖内置组件Suspense:给 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）
vue异步组件 es提案的import() webpack的require,ensure() vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...

umi路由懒加载和权限验证（基于React）

一、路由懒加载

二、路由权限验证

umi路由懒加载和权限验证（基于React）相关推荐

最新文章

热门文章