前端路由的底层，唠一唠

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

路由 的概念其实最开始是后端提出的。在一些老的网站上，经常会看到一些这样的地址：

    http://222.68.19.232/webMaster/ggrs/ggrs_dawtgl.htm

有时候还会有 .jsp、.asp 结尾的路径，这些页面一般都是通过服务端用数据加写好的模版，编译之后，直接返回的，现在称其为服务端渲染。

上面的 /webMaster/ggrs/ggrs_dawtgl.htm 就是一个路由，也是一个路径；通过不同的路径，后端可以返回不同的资源，展示不同的页面。

前端路由

前端路由的产生，其实根本原因是 ajax 技术的一个产物。

ajax 的出现，使得前端用户的交互，可以不刷新页面，异步获取数据，响应用户的操作行为，使得用户的体验得到了质的飞跃。进一步，有人提出了单页面 应用的概念：一种不仅仅是交互不刷新，就连页面跳转也不刷新的应用（这里说的刷新，指的是向后端请求页面）；为了实现单页面应用，前端路由就顺其自然的诞生了。

前端路由的实现原理

本质上是监测浏览器地址栏url的变化，截取url地址，然后根据相应的规则做不同的处理

在HTML5新特性出来之前，前端路由基本上都是基于 hash 来实现的

    https://web-example.com/#/page1

因为 # 后面的值的变化，并不会向服务器发起请求，所以就不会刷新页面；并且每次 hash 的变化，都会触发window上的 hashchange 事件，开发者可以监听这个事件，从而处理页面的切换、展示。

在14年HTML5新特性出来之后，原生对象 history 多了两个API方法，replaceState 和 pushState，这两个API允许开发者在不刷新页面的情况下，修改url链接，并且可以选择是否向 history 新增历史页面。在用户点击浏览器的返回或者调用 history.go() 和 history.back() 时，会触发window上的 popstate 事件，开发者可以监听这个事件，做相应处理。

history 的路由整体流程大概就是这样：

注意： history 路由模式下，需要特殊配置nginx：

    location / {
        root /var/www;
        index index.php index.html index.htm;
        try_files $uri $uri/ /index.html; 
    }

其中 try_files 的作用，是依次去匹配相应路径文件、相应路径目录下的index.html，如果最后都找不到，就会重定向到根路径下的index.html

后记

回头想想，其实 vue-router 和 react-router-dom 本质上都是基于 hash 和 history 两种方式去实现的，他们的底层差距并不会很大。只不过他们都会结合自己的框架，去做相应的操作；比如组件的替换、dom的更新以及各个组件、VDom的状态管理