前端路由论述

前端路由

前言

首先描述两个基本概念。

• MPA 多页应用
• SPA  单页应用

多页应用，即每一次页面切换，后台服务器都会返回一个新的html文档。

单页应用，即每一次页面切换，内容会由JavaScript渲染生成。

提到单页应用，就得提到另一个概念。

• MVC设计模式(Model-View-Controller)

Model(模型)，即处理数据逻辑的部分(数据库中存取数据)。

View(视图)，即处理数据显示的部分(视图依据数据模型创建)。

Controller(控制器)，即处理用户交互的部分(从视图数据读取数据，控制用户输入，并向模型发送数据)

SPA(单页应用)是基于MVC设计模式的，即触发控制器，向模型发送数据，进而改变视图。

在SPA中，发生了三个步骤：

1. 通过改变hash或者history
2. JavaScript通过DOM选中元素
3. 重新注入JavaScript代码

值得一提的是，在步骤三中。我们注入的代码，是一个类，类就有属性和方法，展示在页面的html代码，是叫做template(模板)的属性，通过innerHTML插入选中的元素。

一、路由的基本职能

1. 静态路由
   
2. 动态路由
3. 嵌套路由
4. 路由传参
5. 权限与重定向
6. 错误

静态路由：即类不做任何处理。

动态路由：即携带一个id值，类会根据这个id值，进行相应的数据展示。

嵌套路由：即子路由会加上父路由的路径。

路由传参：即类会接受参数，使用参数进行相应数据的展示。

权限与重定向：即在注入类之前，会进行一个判断，token是否存在，存在的话注入指定的类，不存在的话注入其它类(重定向)。

错误：即出现错误，会注入一个展示404的类。

二、路由的高级职能

1. 生命周期-守卫
2. 过渡
3. 性能-按需加载
4. 滚动Scroll

生命周期-守卫：类的方法中，注入到页面render只是其中一个，还有其它的方法(路由的不同状态)和render方法，共同组成了类执行的生命周期。在render方法前后的一些方法，常被成为导航(路由正在发生变化)守卫

过渡：让路由切换具备一定动画效果

性能-按需加载：在路由配置中，使用import('...')来惰性加载代码，并返回一个Promise

滚动Scroll：当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样