前言

  • 什么是路由
  • hash 模式和 history的区别
  • react-router
  • vue-router

    路由

    对url进行改变和监听，来让某个DOM节点显示对应的视图

    浏览器的 history api 和 hash api

    hash模式和history模式

hash模式

  1. <div>
  2.   <a href="#/a">a</a>
  3. <a href="#/b">b</a>
  4. </div>
  5. <script>
  6.   window.addEventListener('hashchange', () => {
  7.   console.log(window.location.hash);
  8. })
  9. </script>
  • 通过 window.location.hash = ‘xxx’ 来修改修改 hash值
  • window.addEventListener(‘hashchange’) 来监听 hash 值的变化

history模式

  • 基本概念，新增的方法和事件
  • 如何在浏览器历史记录中添加 记录
  • 如何保存当前页面的各种状态

  • 如何控制浏览器地址栏中url地址的显示

  • 使用 history.pushState() 来修改

  • window.addEventListener(‘popState’) ，不能监听history.pushState() 方法只有点击浏览器的前进和后退的时候
  • 暂时没有可以监听使用 history.pushState() 修改的方法

    概念

    在不刷新页面的前提下，显式地改变浏览器地址栏中的url地址，进行页面的局部更新。
    例子：页面A 和页面B只有局部区域显示不一致，大部分的界面都是一致的，在HTML5之前，浏览器中，从页面A切换到页面B时，需要在浏览器中从页面A切换到页面B, 使用history api做如下处理
  1. ajax 请求页面B中与页面A中不同的局部区域及该区域中的信息
  2. 在页面A中通过脚本云状态该区域及其中中信息
  3. 通过history api在不刷新页面的前提下，浏览器的地址栏从页面A的url地址切换到了页面B的url地址

window.history.back()
window.history.forward()
window.history.go()

pushState和popstate

vue-router

hash模式(vue-router默认hash模式)就是看到路由上面会有一个 #号, 例如http://localhost:8800/#/; javascript通过hashChange事件来监听url的变化
history模式,就是直接匹配的/, 这种模式充分利用 history.pushState API来完成URL跳转而无需重新加载页面

  1. const router = new VueRouter({
  2. // 使用HTML5的History路由模式
  3.   mode: 'history',
  4.   routes: [...]
  5. })

history模式, 需要后端配置支持, 因为我们的应用是单页应用, 后端如果没有配置, 访问 http://localhost:8800/home就是404;
后端需要配置在接收到所有的请求后, 都会指向同一个index.html

react-router原理

如果只是拦截页面链接的点击那么我可以理解，但是拦截浏览器的返回按钮，或者拦截手机的返回键是怎么做到的呢？难道是有什么神秘的 API 可以像 onClick 事件那样把返回的事件给 preventDefault 掉吗？

原来一切都跟 浏览器的 history api 紧密相关。
它拥有 pushState，replaceState 等方法，调用这些方法可以更改页面当前的 URL ，但是浏览器并不会真正去加载更改后的 URL 的内容。onpopstate

如果你手动进行 pushState 或者 replaceState 的话，是不会触发 onpopstate 事件的。也就是说，通过代码进行页面切换时是不会触发任何事件回调的。只有当按了浏览器的返回、前进按钮才会触发事件回调。而在 history 库里面，如果你通过调用 history.listen 方法来监听页面 URL 切换，并且只通过它提供的 push 、replace 方法来进行页面切换时，那么无论是通过代码进行页面切换，还是通过点击浏览器的返回、前进按钮，它都能够触发事件回调。history 库内部维护了它自己内部的 URL 状态，无论是代码调用 push 、replace ，或者浏览器触发了 onpopstate 事件，都会改变它内部的 URL 状态。而状态一旦发生改变，也就会触发 history.listen 的回调函数。

参考