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的情况

    前端 css
    面试题

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

     目录

    载入天数... 载入时分秒...