Vue 前端路由工作原理

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样

                        http://www.xxx.com/login

大致流程可以看成这样：

1. 浏览器发出请求

2. 服务器监听到80端口（或443）有请求过来，并解析url路径

3. 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）

4. 浏览器根据数据包的 Content-Type 来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其 中一种功能。

前端路由的两种模式

1. Hash------默认值，利用 URL 中的hash("#") 、
2. History------利用URL中的路径（/home）

 在项目中如何设置路由模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

通过mode来设置路由模式，默认是Hash模式

1. hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页 应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。 类 似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内 容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下， 保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#/login

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

function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

1. hash是URL中hash（#）以及后面的那部分，常用作锚点在页面内进行导航，改变URL中的hash
2. 通过onhashchange事件监听URL的变化。改变URL的方式有以下几种：1.通过浏览器前进后退改变URL，2.通过标签改变URL，3.通过window。location改变URL。这几种情况改变URL都会触发hashchange事件

 2. history 模式

 14年后，因为HTML5标准发布。多了两个 API， pushState 和 replaceState ，通过这两个 API 可以改变 url 地址且不会发送 请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏 览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

unction matchAndUpdate () {
// todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)

1. history提供pushstate和replacestate两个方法，这两个方法改变URL的path部分不会引起页面的刷新
2. history提供类似onhashchange事件的popstate事件，但是popstate事件有些不同，通过浏览器前进后退改变URL时会触发popstate事件，通过pushstate/replace或标签改变URL不会出发popstate事件，好在我们可以拦截pushstate/relacestate的调用和标签的点击事件在检测URL变化。所以监听URL变化可以实现，只是没有hashchange那么好用
    

Vue router 实现

我们来看一下 vue-router 是如何定义的：

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [...]
})
new Vue({
router
...
})

可以看出来 vue-router 是通过 Vue.use 的方法被注入进 Vue 实例中，在使用的时候我们需要全局用到 vue-router 的 routerview 和 router-link 组件，以及 this.$router/$route 这样的实例对象。那么是如何实现这些操作的呢？下面我会分几个章节详细 的带你进入 vue-router 的世界。(阅读源码是有点枯燥，但是带着问题去了解，就感觉很有意思。如果你对 vue-router 的实现 机制也存在一些疑问，可以一起探讨交流)

最后说下两种模式的区别

1. pushstate设置新的URL可以是与当前URL同源的任意URL，而hash只可以修改#后面的部分，只能设置与当前同文档的URL
2.  pushstate通过state.object可以添加任意类型的数据到记录中，而hash只可以添加短文字符串
3. pushstate可以额外设置title属性供后续使用
4. history模式则会将URL修改的就和正常请求后端的URL一样，如果后端没有配置对应的ULR路由处理，则会返回404错误