前端路由随笔

2022-09-29

字数统计: 1.1k | 阅读时长≈ 3 分钟

一、什么是路由？

路由的概念起源于服务端，在以前前后端不分离的时候，由后端来控制路由，当接收到客户端发来的 HTTP 请求，就会根据所请求的相应 URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有 URL 的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。它的好处与缺点非常明显，如下：

好处：安全性好，SEO 好；
缺点：加大服务器的压力，不利于用户体验，代码冗合不好维护；

也正是由于后端路由还存在着自己的不足，前端路由才有了自己的发展空间。对于前端路由来说，路由的映射函数通常是进行一些 DOM 的显示和隐藏操作。这样，当访问不同的路径的时候，会显示不同的页面组件。前端路由主要有以下两种实现方案：

Hash
History
二、前端路由Hash模式

一个URL是由很多部分组成，包括协议、域名、路径、query、hash等，早期的前端路由的实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容。例如：https://www.WDNMD.com#666,它的location.hash='#666'

Hash模式的特性：

URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。
hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
我们可以使用hashchange事件来监听hash的变化。(a标签和对loaction.hash进行赋值等等)
通过上面的了解，我们大概知道这些
- hash模式所有的工作都是在前端完成的，不需要后端服务的配合
- hash模式的实现方式就是通过监听URL中hash部分的变化，从而做出对应的渲染逻辑
- hash模式下，URL中会带有#，看起来不太美观
  因此Hash模式还是有些小小的不足，History API也就出现了

三、前端路由History API模式

history路由模式的实现，是要归功于HTML5提供的一个history全局对象，可以将它理解为其中包含了关于我们访问网页（历史会话）的一些信息。window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。 History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

同时它还暴露了一些有用的方法，比如：