Vue Router

一、前端路由简介

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

有哪些钩子？如何进行权限控制？

二、实现原理

history模式

HTML5中的两个API：pushState和replaceState，改变url之后页面不会重新刷新，也不会带有#号，页面地址美观，url的改变会触发popState事件，监听该事件也可以实现根据不同的url渲染对应的页面内容但是因为没有#会导致用户在刷新页面的时候，还会发送请求到服务端，为避免这种情况，需要每次url改变的时候，都将所有的路由重新定位到跟路由下

hash模式

url hash: http://foo.com/#helpopen in new window#后面hash值的改变，并不会重新加载页面，同时hash值的变化会触发hashchange事件，该事件可以监听，可根据不同的哈希值渲染不同的页面内容

插件注册：Vue.use将VueRouter插件注入Vue中，use方法会调用vue-router的install方法，对VueRouter进行安装。
创建router实例：可以看到这个阶段，Vue Router主要做了两件主要的事情：创建 match 匹配函数：根据用户路由配置对象生成普通的根据 path 来对应的路由记录以及根据 name 来对应的路由记录的 map，方便后续匹配对应根据配置的mode创建路由实现的实例：如果当前环境不支持history模式，会强制切换到hash模式；默认hash模式如果当前环境不是浏览器环境，会切换到abstract模式下。
创建Vue实例：对_router赋值，此时this.$options.router包含着传入的路由参数执行创建vue router实例中的init方法，根据不同模式生成监控路由变化的History对象

三、有几种模式？分别说下他们的实现原理？

两种模式

hash模式：利用 window 的 hashchange 事件，监听到 hash 改变后拿到对应的路由组件，更新DOM
history模式：利用 history.pushState 事件改变浏览器地址栏，以及 window 的 popstate 事件监听浏览器的前进后退事件，更新DOM

# Vue Router

# 一、前端路由简介

# 二、实现原理

# history模式