Vue路由模式

1.Vue路由原理

路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端

2.Vue路由模式

总共有Hash和History两种模式

Hash模式：在浏览器里面的符号 “#”，以及"#"后面的字符称之为Hash，用window.location.hash读取。
Hash模式的特点：用来知道浏览器的动作，对服务端安全无用；hash不会重加载页面；

History模式：history采用HTML5的新特性，使页面更美观，并且提供了两种新方法：pushState()，replaceState()可以对浏览器的历史栈进行修改，以及popstate事件的监听到状态变更。
History模式的特点：history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致

3.Vue路由跳转及传参

路由传参有三种方式，分别是：
query、params和动态路由传参

接收方式：
通过query方式传递的参数一般通过this.$route.query接收

通过params方式传递的参数一般通过this.$route.params接收

通过动态路由传参方式传递的参数一般通过this.$route.params接收

query使用path和name传参跳转都可以，params只能使用name传参跳转。

传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，页面刷新参数不会丢失。
params也可以不用配，但是params不在路由配参数的话，只有第一次进入页面参数有效，当用户刷新当前页面的时候，参数就会消失。

4.Vue路由守卫

路由守卫分为全局守卫和组件守卫

全局守卫：
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后

组件守卫：
beforeRouteEnter 进入路由前
beforeRouteUpdata 路由更新时（2.2新增）
beforeRouteLeave 离开路由前

路由守卫钩子函数里面的三个参数分别是什么？
to from next这三个参数：

to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。

next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。