为什么要使用路由

现在的网络应用程序越来越多的使用 AJAX 异步请求完成页面的无缝刷新，导致浏览器的 URL 不会发生任何变化而完成了请求，从而破坏了用户浏览体验。同时本次浏览的页面内容在用户下次使用 URL 访问时将无法重新呈现，使用路由可以很好地解决这个问题。

单页面应用利用了 JavaScript 动态变换网页内容，避免了页面重载；路由则提供了浏览器地址变化，网页内容也跟随变化，两者结合起来则为我们提供了良好的单页面 web 应用。

前端路由实现方式

路由需要实现三个功能：

  1. 当浏览器地址变化时，切换页面；
  2. 点击浏览器【后退】、【前进】按钮，网页内容跟随变化；
  3. 刷新浏览器，网页加载当前路由对应内容；

在单页面 web 网页，单纯的浏览器地址改变，网页不会重载，如单纯的 hash 网址改变网页不会变化，因此我们的路由只要是通过监听事件，并利用 js 实现动态网页内容，有两种实现方式：

  • hash 模式：监听浏览器地址 hash 值变化，执行相应的 js 切换网页；
  • history 模式：利用 history API 实现 url 地址改变，网页内容改变

它们的区别最明显的就是 hash 会在浏览器地址后面增加 # 号，而 history 可以自定义地址。

hash 模式

使用 window.location.hash 属性及窗口的 onhashchange 事件，可以实现监听浏览器地址 hash 值变化，执行相应的 js 切换网页。

  1. hash 指的是地址中 # 号以及后面的字符，也称为散列值。hash 也称作锚点，本身是用来做页面跳转定位的。
  2. 散列值是不会随请求发送到服务器端的，所以改变 hash ，不会重新加载页面；
  3. 监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置 hash 值；
  4. location.hash 值的变化会直接反应到浏览器地址栏

    触发 hashchange 事件的几种情况

  • 浏览器地址栏散列值的变化（包括浏览器的前进、后退）会触发 window.location.hash 值的变化，从而触发 onhashchange 事件；
  • 当浏览器地址栏中 URL 包含哈希如 http://www.baidu.com/#home ，这时按下输入，浏览器发送 http://www.baidu.com/ 请求至服务器，请求完毕之后设置散列值为 #home ，进而触发 onhashchange 事件；
  • 当只改变浏览器地址栏 URL 的哈希部分，这时按下回车，浏览器不会发送任何请求至服务器，这时发生的只是设置散列值新修改的哈希值，并触发 onhashchcange 事件；

  • html 中 <a> 标签的属性 href 可以设置为页面的元素 ID 如 #top ，当点击该链接时页面跳转至该 id 元素所在区域，同时浏览器自动设置 window.location.hash 属性，地址栏中的哈希值也会发生改变，并触发 onhashchange 事件；

    history模式

    概述：

  • window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。

  • History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
  • 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
  • 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

属性：

  • History.length：当前窗口访问过的网址数量（包括当前网页）
  • History.state：History 堆栈最上层的状态值

方法：

  • History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
  • History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
  • History.go()：接受一个参数作为参数，以当前网址为基准，移动到参数指定的网址。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为 0 ，相当于刷新当前页面。
    1. history.back();
    2. history.forward();
    3. history.go(1); // 相当于 history.forward()
    4. history.go(-1); // 相当于 history.back()
    5. history.go(0); // 刷新当前页面
    History.pushState()
    该方法用于在历史种添加一条记录。 pushState() 方法不会触发页面刷新，只是导致 History 对象发生变化，该地址栏会有变化。
    语法：history.pushState(object, title, url)

History.replaceState()
该方法用来修改 History 对象的当前记录，用法与 pushState() 方法一样。

popstate 事件
每当 history 对象出现变化时，就会触发 popstate 事件。
注意：

  • 仅仅调用 pushState() 方法或 replaceState() 方法，并不会触发该事件；
  • 只有用户点击浏览器倒退按钮和前进按钮，或者使用 js 调用 History.back() 、History.forward() 、History.go() 方法时才会触发；
  • 另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发；
  • 页面第一次加载的时候，浏览器不会触发 popstate 事件。

参考：