web前端路由的工作流程

一、route与router的关系

一说到路由,咱们第一个想到就是生活中的路由器

生活中的路由器就是一个类似盒子的东西,下面有很多的端口,而每一个端口通过地址分配对应一台设备

而在前端Vue里面的路由对应关系跟这个路由器的对应关系差不多的,我们可以在router里面注册很多的端口也就是route,然后通过相应的规则将组件与其一一对应,当我们需要展示某一组件的时候,直接找到对应route就可以的

在一个项目中,router只有一个,而route可以有很多,并且每一个route都是不同的
可以这么说,有多少个路由组件,就会有多少个不同的route

二、路由的工作流程

当我们要展示不同的路由组件的时候,需要先触发路径的变化

前端路由主要由两种方式实现：

location.hash+hashchange事件
history.pushState()+popState事件

事件触发后会router会从上往下进行路径的匹配,然后将匹配到的组件展示到提前准备的坑位里面

当没有匹配到时,就会是一片空白