单页面应用路由实现

单页面应用与多页面应用

什么是单页面应用？

单页面应用指的是第一次进入页面的时候会请求一个html文件，切换到其他组件的时候，虽然路径会发生相应的变化，但是没有新的html文件请求，原理是javascript会感知到url的变化，然后javascript会动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前的页面上，这个时候的路由不是由后端做的而是由前端来做的，来判断页面到底显示哪个组件，这个过程就是单页面应用。

单页面应用的优缺点

• 优点：页面切换快，因为页面每次切换的时候，并不需要做html文件的请求，这样就减少了很多http发送的时延。
• 缺点：单页面应用的首屏加载时间比较慢，首屏加载需要一个html请求和一次javascript请求，时间相对较慢。而且SEO效果差，因为搜索引擎只认识html中的内容，但是单页面应用中的内容很多需要靠javascript渲染出来，搜索引擎不识别这一部分的内容，就会导致SEO效果不好。

什么是多页面应用？

多页面应用指的是每一次页面跳转，服务器都会返回一个新的HTML资源，这种类型的应用就叫做多页面应用。

多页面应用的优缺点

• 优点：首屏加载快，SEO效果好。因为客户端向服务端发送请求的时候，服务端只返回一个HTML页面，所以加载比较快。
• 缺点：页面切换比较慢。

单页面应用和多页面应用的区别

1. 应用构成不同

   多页面应用是由多个不同的页面构成，单页面应用是一个外壳页面和多个页面片段构成。

2. 页面跳转方式不同

   多页面应用的页面跳转是从一个页面跳转到另一个页面，而单页面应用则是把一个页面片段删除或隐藏，加载另一个页面片段。

3. 跳转后公共资源是否重新加载。

   跳转后多页面应用是需要进行重新加载的，但的那页面不需要重新加载。

4. 用户体验不同

   多页面应用首屏加载快但是切换慢，单页面应用首屏加载慢但是切换快。

5. 页面传递数据的方式不同

   多页面应用依靠URL、Cookie、LocalStorage来传递数据，单页面应用则是靠组件进行通信，相对更加简单。

单页面的路由实现原理

前端路由本质上是在不刷新浏览器的请求下修改URL、检测URL的变化，截获URL的地址，通过解析、匹配路由规则从而实现UI的更新。路由的实现通常有两种形式，一种是Hash模式，一种是History模式。

Hash路由的原理

在Hash模式下，url中#后面的部分表示的是一个客户端状态，当这部分发生改变的时候，浏览器本身就不会刷新，即在不刷新浏览器的情况下修改浏览器链接，同时监听hashChange事件来监听url中hash值的变化，触发相关函数，改变相关组件。

History路由的原理

History模式利用了HTML5中history的API，history.pushState和history.replaceState这两个方法可以在不刷新页面的情况下，操作浏览器的历史记录，然后通过监听popState事件来监听url的变化，触发相关函数，改变相关组件。