vue-router(路由原理？路由守卫？) 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
原理 一般源码中，都会用到 window.history 和 location.hash 原理：通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图，通过BOM中的location对象，其中对象中的location.hash储存的是路由的地址、可以赋值改变其URL的地址。而这会触发hashchange事件，而通过window.addEventListener监听hash值然后去匹配对应的路由、从而渲染页面的组件 1.一种是# hash,在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 2.一种是h5的history,使用URL的Hash来模拟一个完整的URL
路由有两种模式 hash和history模式 默认是hash
vue-router的实现原理(核心)：更新视图但不重新请求页面。
1、hash ——即地址栏 URL 中的#符号，它的特点在 于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影 响，因此改变 hash 不会重新加载页面。
2、history ——利用了 HTML5 History api 在浏览器中没有# 有浏览器兼容问题
3、history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，否则返回 404 错误。
•一：全局的守卫
无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法 router/index.js
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫，在beforeRouteEnter调用之后调用
同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用
router.afterEach 全局后置钩子 进入路由之后
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
二：组件级路由守卫 放在要守卫的组件里，跟data和methods同级
beforeRouteEnter 进入路由前,此时实例还没创建,无法获取到zhis
beforeRouteUpdate (2.2) 路由复用同一个组件时
beforeRouteLeave 离开当前路由,此时可以用来保存数据,或数据初始化,或关闭定时器等等
三：单个路由规则独享的守卫 写在路由配置中，只有访问到这个路径，才能触发钩子函数
beforeEnter:(to,from,next)=>{ alert("欢迎来到孙志豪的界面") next() }
参数
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由对象
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
重定向用哪个属性？
redirect:”/路径”
