从import开始，手撕vue-router

首先，我们先来介绍一下两种不同的模式hash和history模式

hash，就是url中#后面的字符串，因为我们是使用单页面应用，所以我们把hash值和页面进行一一对应，实现页面的跳转和切换。并且，我们对url的hash值进行实时监听。而且改变页面的hash值，不刷新页面，不刷新页面，不刷新页面

history，就是操控history的API，实现对历史记录的操作，例如回退，前进等。主要是使用history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；这个API来完成跳转，且无需加载页面。

abstract，当不在浏览器的环境下的时候，强制切换到abstract环境下。创建一个数组和一个下标来模拟栈的操作。来模拟history的入栈，出栈等操作。

但是，history模式需要后端进行配置，否则无法找到资源。
那我们来想一下为什么history需要单独配置。
例如：history url是www.baidu.com/a/b。当我们请求这个的时候，是真真切切的发送了一个get请求。虽然我们的history路由切换的时候是不刷新的，但是我们点击f5进行刷新，就会把当前的url当成一个get请求，并发送请求。但是我们是找不到/a/b下这个路径的资源。那我们就会报错404，所以需要后端进行配置

那我们再来说一下，history模式的实现
它主要靠的是history里面的api,其中有一个pushState()方法,pushState方法就是向history中push一条记录，更改页面url，但是不刷新页面，不刷新页面，不刷新页面

我们再来讲一下两者的优缺点

Hash模式

原理
基于浏览器的hashchange事件，地址变化时，通过window.location.hash 获取地址上的hash值；并通过构造Router类，配置routes对象设置hash值与对应的组件内容。

监听，触发hashchange(自带)的方法，进行相应监听

优点
hash值会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面
hash改变会触发hashchange事件, 能控制浏览器的前进后退
兼容性好（IE8）

缺点
地址栏中携带#，不美观
只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL
hash有体积限制，故只可添加短字符串
设置的新值必须与原来不一样才会触发hashchange事件，并将记录添加到栈中
每次URL的改变不属于一次http请求，所以不利于SEO优化

History模式

原理
基于HTML5新增的pushState()和replaceState()两个api，以及浏览器的popstate事件，地址变化时，通过window.location.pathname找到对应的组件。并通过构造Router类，配置routes对象设置pathname值与对应的组件内容。

监听

我们只能调用history.pushState和history.replaceState方法以及前进后退进行history切换路由。那么我们对其操作方法进行相应的操作和监听。

history对象内的方法

popstate事件，对前进后退和pushState以及replaceState进行监听操作。
其中history中的state,就是对其进行操作。

优点
没有#，更加美观
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中
pushState() 可额外设置 title 属性供后续使用
浏览器的进后退能触发浏览器的popstate事件，获取window.location.pathname来控制页面的变化

缺点
URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器。如果用户输入的URL回车或者浏览器刷新或者分享出去某个页面路径，匹配不到任何静态资源，就会返回404页面。所以需要后台配置支持，覆盖所有情况的候选资源，如果 URL 匹配不到任何静态资源，则应该返回app 依赖的页面或者应用首页。
兼容性差，特定浏览器支持(IE10)

我们先了解一下vue-router的一些知识要点，我们再来进行手撕源码了。会一点点更新，持续更新中。。。。。。