vue-router两种模式原理

本文最后更新于:2021年8月4日 晚上

vue-router的hash、history两种模式的原理以及优缺点

两种模式,创建路由实例时指定mode: 'hash'('history')

一、hash模式

本质是利用了window.onhashchange属性

当 一个窗口的 hash (URL 中 # 后面的部分)改变时就会触发 hashchange 事件(参见 location.hash)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>测试一下</div>
<script type="text/javascript">
window.onhashchange = function(event){
console.log(event.oldURL,event.newURL)
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
</script>
</body>
</html>

缺点:只能操作#后的片段,下文的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
    window.history.back();

    前进

    1
    window.history.forward();

    跳转(前进/后退n次)

    1
    2
    window.history.go(2);// 前进两次,相当于执行两次forward()
    window.history.go(-2);// 后退两次,相当于执行两次back()

    设置状态(不同的url保存不同的state)

    1
    2
    3
    4
    5
    6
    7
    history.pushState({color:'red'}, 'red', 'red'})
    window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
    }
    }

    两者对F5刷新的处理:

    hash

    例如:http://www.test.com/#/inde

    刷新后,发送请求http://www.test.com(#前的部分)

    history

    例如:http://www.test.com/inde

    刷新后,发送请求http://www.test.com/inde

    显然history模式下是有可能出现404的

    缺点小结

    hash:只能操作#后的片段,下文的history则没有这个限制

    history:有可能出现404的情况


    本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

     目录