前端路由的简单实现

刚完成一个新年专题活动的需求，分为pc端和wap端。pc端下多个弹窗在wap端下全部设计成多个单张页面呈现

为了更好的用户体验首选SPA单页面实现。

SPA单页面的优缺点

优点：

用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。

基于不需要重新加载整个页面，减少了向服务器端的请求，即节约了成本又对服务器的压力大大减小。

缺点：

不利于seo搜索引擎优化

初次加载页面更耗时

市面上有大量的SPA框架，如React，Vue等，它们有许多相似之处，都有：

使用 Virtual DOM（虚拟DOM）

提供了响应式(Reactive) 和组件化(Composable) 的视图组件。

将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

对于一个专题活动又不是一个独立的中大型项目使用这些框架有点重了，不以项目大小、项目需求为导向的技术选型就是耍流氓行为，在这个专题活动中我只需要一个简单的路由。

前端路由主要由两种方式实现：

location.hash和hashchange事件

H5 history Api中的history.pushState和popState事件(不在本文讨论范围,请自行搜索)

hash+hashchange实现

hash属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

修改hash值从

改成

浏览器不会重新向服务器请求index.html，就是说不会重新加载整个页面。这时只要通过hashchange事件监听location.hash的变化，做相应的处理即可。

设置a标签href 属性为 '#location1'，点击时就可以在当前url的后面增加上'#location1'，同时触发hashchange,再回调函数中进行处理。

直接在js中对location.hash = '#location1'赋值，此时url也会跟着改变，同时触发hashchange事件。

前端路由的简单实现，代码如下仅供参考：

hash这种方式的好处是浏览器兼容性好，但也有一个缺点就是#的存在，让一些人看了觉得不是很舒服，所以H5给history新增了一些api，代码简单，url可以随意指定，如果是纯相对路径需要与服务器端相配合。

代码不重要，重要的是思路。。。