Skip to content
目录

前端路由

单页面应用(SPA)

单页面就是指我们的服务只有一个index.html静态文件,这个静态文件前端生成后,丢到服务器上面。用户访问的时候,就是访问这个静态页面。而静态页面中所呈现出来的所有交互,包括点击跳转,数据渲染等,都是在这个唯一的页面中完成的。

URL的组成

  • 协议 scheme :http https
  • host
  • 域名 domain
  • 端口 port
  • 路径(目录+文件名)directory
  • query
  • 哈希(hash)

Hash模式

监听 window 的 hashchange 事件

根据 window.location.hash 重新渲染页面

有了监听事件,且改变hash页面并不刷新,这样我们就可以在监听事件的回调函数中,执行我们展示和隐藏不同UI显示的功能,从而实现前端路

hash模式所有的工作都是在前端完成的,不需要后端服务的配合 hash模式的实现方式就是通过监听URL中hash部分的变化,从而做出对应的渲染逻辑 hash模式下,URL中会带有#,看起来不太美观

History模式

history路由模式的实现,是要归功于HTML5提供的一个history全局对象,可以将它理解为其中包含了关于我们访问网页(历史会话)的一些信息。同时它还暴露了一些有用的方法

  • window.history.go 可以跳转到浏览器会话历史中的指定的某一个记录页
  • window.history.forward 指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同
  • window.history.back 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同
  • window.history.pushState 可以将给定的数据压入到浏览器会话历史栈中
  • window.history.replaceState 将当前的会话页面的url替换成指定的数据

而history路由的实现,主要就是依靠于pushState与replaceState实现的,这里我们先总结下它们的一些特点

都会改变当前页面显示的url,但都不会刷新页面 pushState是压入浏览器的会话历史栈中,会使得history.length加1,而replaceState是替换当前的这条会话历史,因此不会增加history.length

每当激活同一文档中不同的历史记录条目时,popstate 事件就会在对应的 window 对象上触发。如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的,则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。 调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发,比如调用 history.back() 方法。即,在同一文档的两个历史记录条目之间导航会触发该事件。

Released under the MIT License.