前端发送请求后端未反应_前端路由原理学习记录一

前端路由是如何产生的？

刚开发学习前端，开发网站是写上一个个html文件，分别然后插入css，插入script标签。这样进行开发，这样了就有两个比较大的问题，一是重复的东西不容易复用，而是代码容易被别的代码干扰。
前端技术逐渐发展，现代web框架（vue、angular、react）产生，它在两方面极大的解放了开发者，提高了开发效率。一是组件式开发，提高了代码的复用性，并且避免了代码间的干扰（css也有对应的避免方式）。二是由原来的事件驱动转为数据驱动，让开发人员不用像以前一样需要写很多的dom事件，数据的改变可以引起页面的改变。web框架开发的是单页面应用，前端路由也随之而来。

什么是前端路由？

说到前端路由，先说后端路由。客户端向服务器端发送请求，这个请求url就是就是后端路由的一部分，后端路由匹配上了，然后进行处理，返回相应的资源。前端路由，就是url的匹配处理在前端页面进行，而不需要向后端请求。这就是一种在页面不刷新的情况下，更改页面内容的手段。

前端路由是如何实现的？

如果让我们自己写一个前端路由，我们应该从何入手？首先url更改时，页面不能刷新，不然肯定会向服务器发送请求。这里就有两个基础的方法可以做到，window.location和window.history（的pushState和replaceState方法）。
1. window.location
- location.href，完整的网址
- location.hash， hash值虽然出现在url中，但不会被包含在http请求中，因此改变hash值不会重新加载页面
- location.replace(url)，不会将新的url添加到浏览器访问历史中，而是替换掉当前的url
- 每次改变location.hash值，都会在浏览器访问历史中增加一个记录
- 可以通过hashchange事件来监听hash值的变化

输入网址变化是手动改了hash部分

2. window.history
- history.go(),history.forward(),history.back()
- history.pushState (stateObj, title, url) 修改当前url，会再浏览器访问历史中增加一个记录
- history.replaceState() 替换当前url，不会增加浏览器访问历史记录
- 使用这两个方法更改url，浏览器不会刷新页面
- popstate事件（html5新增）
- 当活动历史记录条目更改时，将触发popstate事件。事件的state属性包含历史条目的状态对象（stateObj）的副本；
- 调用history.pushState()或history.replaceState()修改url时不会触发popstate事件

两种基础的方法，就有了前端路由的两种模式

1. hash模式

后面的url解析，匹配页面，页面渲染，应该在hashchange事件里进行。这里简单的可用匹配url然后用对应的html做innerHtml替换。没写页面加载的，页面加载的处理也和hashchange里一样，不过触发的事件不同。
2. history模式

history模式和hash模式除了监听的事件不同，改变url的方式不同，之后的处理是一样的。需要注意的是，这种模式下，页面加载时，向后端发送的请求时url完整的路径，这就需要后端设置，不管请求的是哪个路径（需要返回页面的路径）都返回一个html文件。不然会出现页面在切换的时候正常，但一刷新就404。