vue路由的原理

vue-router 实现 — install

• Vue 通过 use 方法，加载VueRouter中的 install 方法。install 完成 Vue 实例对 VueRouter 的挂载过程。
• 为了让 _router 的变化能及时响应页面的更新，所以又接着又调用了 Vue.util.defineReactive方法来进行get和set的响应式数据定义；
• 后续步骤便是为Vue全局实例注册2个属性$router和$route；以及组件RouterView和RouterLink。

vue-router 实现 — new VueRouter(options)

switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
复制代码

通过上面的代码，我们可以看出来 VueRouter对不同模式的实现大致是这样的：

1. 首先根据mode来确定所选的模式，如果当前环境不支持history模式，会强制切换到hash模式；
2. 如果当前环境不是浏览器环境，会切换到abstract模式下。然后再根据不同模式来生成不同的history操作对象。

vue-router 实现 — HashHistory

vue-router 实现 — HTML5History

vue-router 实现 — 路由变更监听

介绍介绍介绍介绍：

后端路由

路由的概念：

路由这个概念最先是后端出现的，浏览器发送请求=》服务器解析url路径=》返回相应信息（可以是 html 字串，也可以是 json 数据，图片等），说白了，后端路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，请求不同的资源。

前端路由：

1，hash模式

我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转(渲染)。

随着ajax的流行，异步请求数据是在不需要刷新浏览器的情况下进行的，而SPA就是最为体现的模式。它不仅仅是交互无刷新，页面的跳转也是无刷新的，为了实现SPA–单页面应用，便出现了前端路由。

http://www.xxx.com/#/login
复制代码

这种#后面hasn值的变化，并不会导致浏览器向服务器发送请求，浏览器不发送请求，也就不会刷新新页面。但是每次hash的变化，还会触发hashchange这个事件,通过监听这个事件，我们就可以知道hash值发生了哪些变化，然后我们便可以监听hashchange来实现更新页面内容的操作：

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)
复制代码

2.history模式

概要：

history 路由模式的实现主要基于存在下面几个特性：

1.pushState 和 repalceState 两个 API 来操作实现 URL 的变化 (这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录) ；

2.我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转(渲染)；

3.history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转(渲染)。

详解：

• 2014年后，因为html5标准的发布，多了两个API，pushState和replaceState，通过这两个API可以改变URL地址且不会发生请求。同时还有popstate事件。调用history.replaceState()或者history.pushState(),不会触发popstate事件。
• popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。
• 用了HTML5的实现，单页面路由就不会多出来#，变得更加美观。但是因为没有#号，所以用户在刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免这种情况的发生，所以我们就需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
   // todo 匹配路径 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)
复制代码