两种模式，分别是 hash模式 和 history模式。

  • hash：

    • hash 模式的原理是 onhashchange 事件，可通过 window 对象监听；
    • 符号本身以及它后面的字符被称为hash，可以通过 window.location.hash 获取；
    • hash 虽然包含在浏览器的url中，但是它不会包括在HTTP请求中，所以改变hash不会重新加载页面；
    • 每一次改变hash，都会在浏览器的访问历史中增加一个记录，所以可以实现前端路由“更新视图但不重新请求页面”的功能，同时也可使用浏览器的 前进、后退 功能
  • history：

    • history 的原理是 html5 的几个新的API，分别是history.back()、history.go()、history.forward()、history.pushState()、history.replaceState()、window.onpopState()这几个方法；
    • back、forward、go这三个方法都用于切换历史状态，分别表示 后退、前进、跳转；
    • pushState、replaceState这两个方法主要用于修改历史状态，接收三个参数，分别是stateObj、title、url；pushState 是在浏览器中新增一条记录，replaceState是在浏览器中替换当前的历史记录；这两个方法中的 stateObj 都会在popState事件被触发时传递过去
    • 使用 history 模式时，需要配合后端的支持，因为url路径修改后，会请求服务器的数据，如果服务器中没有相应的响应或者资源，则会出现404错误；所以需要在服务器上配置一个默认路径，当url匹配不到任何静态资源的时候，返回到同一个页面（可配置成首页 index.html ）

版权声明：本文为upward-lalala原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/upward-lalala/p/14883104.html