murphywuwu
commented
3 years ago 为什么会出现前端路由
首先，网页的更新通常分为两种：
- 第一种更新与后端数据有关，比如提交表单，搜索或删除数据等
- 第二种更新与DOM结构有关，比如进行页面的切换。
传统网页的更新
在传统页面中，切换页面或者进行与后端数据交互有关的操作来更新页面时。每一次的操作，都会通过请求url来获取html资源并刷新浏览器来实现页面的更新。这样的用户体验非常糟糕，就像下面这样：
无刷新更新的解决方案
所以为了改善用户体验，就有了无刷新更新。无刷新更新的意思是，浏览器可以在不刷新整个页面的请下，对网页的部分进行更新。
ajax的出现，解决了网页进行与后端交互数据有关更新时的无刷新更新问题。 前端路由的出现，则解决了用户进行页面跳转切换时进行DOM结构有关更新的无刷新更新问题，就像下面这样：
前端路由的解决方案
根据上图的操作，我们可以知道，前端路由的实现，需要满足下面3个条件。
- 无刷新: 浏览器中的
url改变时，浏览器不会发出请求，刷新页面 - 监听:
url的改变可以被监听 - 状态记录: 页面更新时对应的
url以及页面状态可以被浏览器记录。从而可以通过前进，后退来改变页面状态。
满足上述条件的解决方案有下面两种
hash模式
打开浏览器，输入www.baidu.com的网址，然后接着打开浏览器中的控制台输入
location.hash = 'hello'我们会发现浏览器中的url发生了改变，如下
同时浏览器并没有刷新页面。点击左边的后退按钮，也会使url地址恢复到之前的地址www.baidu.com。点击前进按钮，url则变成带有hash值的样子。所以我们可以通过监听url中hash值的变化来更新页面。
history