讲讲前端路由原理。比较一下history和hash这两种路由。

现代我们在开发SPA(单页面应用时)往往会用到路由(vue-router)

有两种模式

Hash模式

一种把前端路由的路径用#拼接在真实url后面的模式,当#后的地址变化时,浏览器不会重新发起请求,而是触发onhashchange事件

网页url组成

 

示例

http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb

 

 

location.protocal // 'http:'

localtion.hostname // '127.0.0.1'

location.host // '127.0.0.1:8001'

location.port //8001

location.pathname //'01-hash.html'

location.serach // '?a=100&b=20'

location.hash // '#/aaa/bbb'

hash的变化会触发网页的跳转,及浏览器的后退和前进

hash可以改变url,但不会触发页面的重新请求(hash的变化记录在window.history),所有的页面跳转都是在客户端进行的,并不算一次http请求;hash只能修改#后的部分,即只能跳转到与当前url同源的url

History模式

允许开发者直接更改前端路由,更新浏览器url地址而不重新发起请求

和hash的区别

正常页面浏览

https://github.com/xxx 刷新页面

https://github.com/xxx/yyy 刷新页面

https://github.com/xxx/yyy/zzz 刷新页面

history模式

https://github.com/xxx 刷新页面

https://github.com/xxx/yyy 前端跳转，不刷新页面

https://github.com/xxx/yyy/zzz 前端跳转，不刷新页面

 history特点

• 新的url可以是与当前url同源的任意url,也可以是与当前url同样的url,但会导致把重复的这次操作记录到栈中
• 通过 history.state ，添加任意类型的数据到记录中。
• 可以额外设置 title 属性，以便后续使用。
• 通过 pushState 、 replaceState 来实现无刷新跳转的功能

存在问题

• 使用history刷新页面时,浏览器会重新发起请求,此时如果nginx没有匹配到url,就会出现404;而hash模式虽然看着是改变了url,但不会包括在http请求中,页面路径还是之前的,nginx不会拦截
• 因此，在使用 history 模式时，需要通过服务端来允许地址可访问，如果没有设置，就很容易导致出现 404 的局面。