Vue Router两种路由模式
hash模式
在hash模式下,本质上是通过修改window.location.href实现的。前端路由的改变依托于**#锚点,而锚点后边的值我们可以通过修改window.location.hash**的值来修改,每一次hash值的变化都会导致触发hashchange这个事件,很重要的一点就是,这样修改页面不会刷新,不会导致浏览器向后端发送请求
1 |
|
history模式
由于Html5标准的发布,pushState()和replace()这两个API的提供可以让我们改变url的地址并且不会发送请求,不仅如此我们还可以读取浏览器的历史栈,并对历史记录栈进行修改,以及popState(),当浏览器跳转到新的状态时,将触发popState事件
hash与history模式的区别:
1.hash模式只能改变锚点后面的url片段,但是pushStatet设置的url可以是与当前url同源的任意url
2.history模式会将url修改的和正常请求后端的url一样,会导致浏览器向后台发送请求,而hash模式就不会导致浏览器向后台发送请求
3.hash模式下,浏览器会记录下所有发生变化的url,浏览器的前进和后退就都可以使用。history模式下,前进和后退并不会使得页面状态退回或者前进到上一个或者下一个状态
使用hash需要注意:
刷新的时候可能会出现404的情况,所以必须使服务端对每一个可能的path都有相应的映射
abstract模式
支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!