vue-router两种模式原理

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

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

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

一、hash模式

本质是利用了window.onhashchange属性

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

<!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

      只有在做出回退操作时,才会触发该事件

    后退

    window.history.back();

    前进

    window.history.forward();

    跳转(前进/后退n次)

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

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

    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 协议 ,转载请注明出处!

     目录