vue路由守卫

一、什么是导航守卫？

导航：“导航”表示路由正

二、为什么使用导航守卫？

真实的项目中需要判断权限或者登录状态决定用户能访问的路由，但是因为路由是在浏览器地址栏中的，用户可以输入，如果不加以拦截就可以看到本不该看到的页面；为了避免这种情况，我们需要使用导航守卫，在路由发生变化时作出相应的判断，判断用户是否可以去到他想去往的页面的路由；

三、常用的导航守卫：

    let router = new VueRouter({....});

1.全局前置守卫

router.beforeEach((to, from, next) => {....})

当一个路由发生变化时（从一个页面跳到另一个页面时），就会触发beforeEach中得回调函数，该回调函数有三个参数：

to 路由对象，即将进入的页面的路由信息 from 路由对象，当前正要离开页面路由信息 next 函数，交出控制权或者中断导航
3.1 next() 交出控制权，执行下面的功能
3.2 next(false) 中断当前导航，如果url改变了，将会回退到当前页面
3.3 next(’/’) 跳转到另一个路由，next可以接收和$router.push()一样的参数

当使用导航守卫时，无论是否通过验证，都要调用next方法，如果通过校验则执行next()
，不通过则重定向或者中断；如果不调用，那么整个路由变化处于挂起状态，无法渲染任何组件；

beforeEnter方法同样有三个参数，其3个参数和全局守卫的三个参数相同，在进入该路由组件之前都会调用该钩子，我们在这个钩子中进行校验，如果校验通过，则执行 next()，只有执行next，才能渲染该路由对应的组件；

3.组件内守卫

最后，你可以在路由组件内直接定义以下路由导航守卫；
beforeRouteEnter 在渲染该组件的对应路由前调用，该钩子中不能访问this，因为实例还未创建
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用，适用于动态路由的参数发生变化时
beforeRouteLeave 导航离开该组件的对应路由时调用，即要从当前页面去往其他页面时调用，可以用来做保存拦在这里插入代码片截，例如提示用户信息尚未保存等；

export default {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}