前端路由的理解。
在react和vue中,都会看到两种实现路由的模式:
history: 历史模式
hash:哈希模式
hash模式
hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。
hash也称作锚点,本身是用来做页面定位的,他可以使对应的id元素显示在可视区域内。
由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,
浏览器的进后退也能对其进行控制,所以人们在html5的history出现前,基本都是使用hash来实现前端路由的。
他的特点在于:hash虽然出现url中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。
hash模式也会产生历史记录。
history模式
history模式利用了 HTML5 History 中新增的 pushState()
和 replaceState()
方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go
的基础之上,它们提供了对历史记录进行修改的功能。
只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
因此可以说,hash 模式和 history 模式都属于浏览器自身的特性。值得注意的是,history模式下,前端访问一个url地址,后端必须根据这个url进行处理,如:https://www.baidu.com/set
,后端必须设置对/set
的处理,否则会返回404
页面。
简单的例子:
1 |
|
在这里推荐一篇文章:理解Web路由(浅谈前后端路由与前后端渲染)