前端路由论述
作者:互联网
前端路由
前言
首先描述两个基本概念。
- MPA 多页应用
- SPA 单页应用
多页应用,即每一次页面切换,后台服务器都会返回一个新的html文档。
单页应用,即每一次页面切换,内容会由JavaScript渲染生成。
提到单页应用,就得提到另一个概念。
- MVC设计模式(Model-View-Controller)
Model(模型),即处理数据逻辑的部分(数据库中存取数据)。
View(视图),即处理数据显示的部分(视图依据数据模型创建)。
Controller(控制器),即处理用户交互的部分(从视图数据读取数据,控制用户输入,并向模型发送数据)
SPA(单页应用)是基于MVC设计模式的,即触发控制器,向模型发送数据,进而改变视图。
在SPA中,发生了三个步骤:
- 通过改变hash或者history
- JavaScript通过DOM选中元素
- 重新注入JavaScript代码
值得一提的是,在步骤三中。我们注入的代码,是一个类,类就有属性和方法,展示在页面的html代码,是叫做template(模板)的属性,通过innerHTML插入选中的元素。
一、路由的基本职能
- 静态路由
- 动态路由
- 嵌套路由
- 路由传参
- 权限与重定向
- 错误
静态路由:即类不做任何处理。
动态路由:即携带一个id值,类会根据这个id值,进行相应的数据展示。
嵌套路由:即子路由会加上父路由的路径。
路由传参:即类会接受参数,使用参数进行相应数据的展示。
权限与重定向:即在注入类之前,会进行一个判断,token是否存在,存在的话注入指定的类,不存在的话注入其它类(重定向)。
错误:即出现错误,会注入一个展示404的类。
二、路由的高级职能
- 生命周期-守卫
- 过渡
- 性能-按需加载
- 滚动Scroll
生命周期-守卫:类的方法中,注入到页面render只是其中一个,还有其它的方法(路由的不同状态)和render方法,共同组成了类执行的生命周期。在render方法前后的一些方法,常被成为导航(路由正在发生变化)守卫
过渡:让路由切换具备一定动画效果
性能-按需加载:在路由配置中,使用import('...')来惰性加载代码,并返回一个Promise
滚动Scroll:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样
标签:单页,前端,加载,视图,注入,论述,路由,页面 来源: https://www.cnblogs.com/bearRunning/p/12040821.html