vue href跳转_前端开发需要了解的「路由跳转原理」

来自公众号： 前端下午茶 链接：

目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-router。

一般来说，这些路由插件总是提供两种不同方式的路由方式：Hash 和 History，有时也会提供非浏览器环境下的路由方式 Abstract，在 vue-router 中是使用了外观模式将几种不同的路由方式提供了一个一致的高层接口，让我们可以更解耦的在不同路由方式中切换。

值得一提的是，Hash 和 History 除了外观上的不同之外，还一个区别是：Hash 方式的状态保存需要另行传递，而 HTML5 History 原生提供了自定义状态传递的能力，我们可以直接利用其来传递信息。

下面我们具体看看这两种方式都有哪些特点，并提供简单的实现，更复杂的功能比如懒加载、动态路径匹配、嵌套路由、路由别名等等，可以关注一下后面的 vue-router 源码解读方面的博客。

1、Hash

1.1 相关 Api

Hash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 得到当前的路径标识符，再进行一些路由跳转的操作，参见 MDN

1. location.href：返回完整的 URL

2. ：返回 URL 的锚部分

3. ：返回 URL 路径名

4. hashchange 事件：当  发生改变时，将触发这个事件

比如访问一个路径 ，那么上面几个值分别为：

# http://sher