hash / history 原理及区别
原理
hash 模式：用hash值模拟路由变化，通过监听
hashchange事件，动态更新页面。history 模式：通过H5的
pushState和resplaceState，这个两个API 可以改变url，但是不会发送请求。
区别
url 展示上，hash 模式有 "#"，
刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由兼容性。
hash 可以支持低版本浏览器和 IE。
路由守卫
-
全局守卫：路由实例上直接操作的钩子函数，即，所有路由都会触发。
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // 守卫，守住底线 })beforeEach(to,from,next)：路由跳转前触发，常用于登录验证beforeResolve(to,from,next)：与beforeEach类似，也在路由跳转前触发，区别在于，导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用（即在beforeEach和 组件内beforeRouteEnter之后，afterEach之前调用）。afterEach(to,from)：在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter之前。
-
路由守卫：在单个路由配置的钩子函数
const router = new VueRouter({ routes:[{ path:'/index', component:index, beforeEnter:(to,from, next) => { // 随便写点什么了 } }] })-
beforeEnter(to,from,next)：与beforeEach完全相同，如果两个都设置了，则此守卫后执行。
-
-
组件守卫：在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。
<script> export default{ beforeRouteEnter (to, from, next) { // 我想不想一个钩子？ }, } </script>beforeRouteEnter(to,from,next)：组件实例创建前，不能调用this。beforeRouteUpdate(to,from,next)：当前路由改变，组件被重复调用，可以使用this。beforeRouteLeav(to,from,next)：导航离开该组件的对应路由时调用可以访问组件实例this
