vue-router两种模式原理
本文最后更新于:2021年8月4日 晚上
vue-router的hash、history两种模式的原理以及优缺点
两种模式,创建路由实例时指定mode: 'hash'('history')
一、hash模式
本质是利用了window.onhashchange属性
当 一个窗口的 hash (URL 中 # 后面的部分)改变时就会触发 hashchange 事件(参见
location.hash
)。
1 |
|
缺点:只能操作#
后的片段,下文的history
则没有这个限制
二、history模式
本质是利用window.history对象
DOM
window
对象通过history
对象提供了对浏览器的会话历史的访问。允许你在用户浏览历史中向前和向后跳转,同时——从HTML5开始——提供了对history栈中内容的操作
history实质是什么?可以F12打开控制台,键入window.history看看
- length
- scrollRestoration
- state
下面两个函数用于保存路径的状态
pushState
通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对像,从而可以对页面状态进行还原
popState
只有在做出回退操作时,才会触发该事件
后退
1 |
|
前进
1 |
|
跳转(前进/后退n次)
1 |
|
设置状态(不同的url保存不同的state)
1 |
|
两者对F5刷新的处理:
hash
刷新后,发送请求http://www.test.com(#前的部分)
history
刷新后,发送请求http://www.test.com/inde
显然history模式下是有可能出现404的
缺点小结
hash:只能操作#
后的片段,下文的history
则没有这个限制
history:有可能出现404的情况
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!