前言

react项目鉴权怎么办?路由跳转没有回调怎么办?路由懒加载怎么办?接下来逐个分析分析一下。

分析

一个实用的路由模块应该至少包括以下几个功能

  1. 能自动根据路由配置按需加载
  2. 能提供类似beforeEnter,afterEnter等生命周期钩子
  3. 生命周期钩子支持异步操作/阻塞后续加载,这个特性在鉴权相关场景有很重要的作用
  4. 能提供过场动画设置
  5. 配置简单,方便调用

定义

先来看一下定义,要满足以上要求,这个类至少由以下几个部分组成。

前端基础设施-封装项目路由模块


接下来看各个功能点分析

按需加载

按路由进行代码分割然后按需加载,适合大多数优化场景,而且这种方式与业务代码完全解耦,虽然有时分割得比较粗糙,但确实是一把梭的普适方案。不过要实现打包后的代码分割至少需要打包工具的支持,幸运的是webpack根据es规范实现相关的APIimport()import()返回一个Promise,完成加载后回调。

现在是在封装react-router,我们还需要@
babel/plugin-syntax-dynamic-import
这个插件在由babel解析成的AST中识别出import()相关的语法。

前端基础设施-封装项目路由模块


ok,思路有了,我们可以这样去配置路由,这样当我们解析配置拿到component时,才去调用import,来达到按路由分割的效果。

前端基础设施-封装项目路由模块


生命周期

其实这个过程就是对传入的component进行一层包装,然后在调用component的各个阶段,回调提前埋下的生命周期钩子函数。

比如像BeforeEnterMounted这两个生命周期就可以像这样埋下对应的钩子

前端基础设施-封装项目路由模块


支持异步操作/阻塞后续加载

很多时候,比如鉴权,进入页面前必要的初始化操作,都是异步的行为,并且异步行为结束前不允许页面加载出来。

这也很好解决,使用async await即可

前端基础设施-封装项目路由模块


使用的时候也很方便,像需要处理异步操作的时候,返回一个Promise就行。嫌麻烦的话也可以封装成vue-router那样,在参数位置给你一个next()去做一下回调。

前端基础设施-封装项目路由模块


过场动画

过场动画的设置与生命周期差不多,只需要在开始加载路由组件时去设置显示,加载完成时设置隐藏即可。

核心

ok,接下来看看这个包装函数是怎么写的

前端基础设施-封装项目路由模块


前端基础设施-封装项目路由模块


前端基础设施-封装项目路由模块


核心内容其实就这么多了,配置读取处理的过程还有类型的声明可看的完整代码,源码是用ts编写的。

如何使用

由配置与渲染两个部分组成,简单易用。

前端基础设施-封装项目路由模块


前端基础设施-封装项目路由模块


路由原理

不会吧不会吧,就是一句话加一张图就可以讲完的事情。

前端路由的核心思路就是通过对浏览器跳转相关的事件做一个代理,匹配到对应路由之后替换dom节点,来完成路由的切换。

前端基础设施-封装项目路由模块

结束

至此,前端路由已经没有什么神秘的地方了,在不同的时间节点回调各种奇奇怪怪的生命周期都没问题。