vue导航守卫

一、 全局前置导航守卫         处理所有的路由---->具体栗子 ：用户未登录 访问首页  直接next（）到登录页面

const router = new VueRouter({ ... })

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

三个参数： to  去哪个路由对象   

                   from   从哪个路由对象离开

                    netx()  进行管道中的下一个钩子函数    next(false): 中断当前的导航。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。

二、全局后置导航守卫     处理所有的路由

router.afterEach((to, from) => {
  // ...
})

只有两个参数 to  from 没有next（）钩子  使用较少

三、路由内独享的守卫   针对单个路由规则

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

这些守卫与全局前置守卫的方法参数是一样的。 只不过是 只对 /foo 路由 规则有效

四、组件内的守卫  针对单个组件

• beforeRouteEnter          进入该组件件时调用此路由守卫  ---具体栗子 ：用户未登录 访问首页  直接next（）到登录页面
• beforeRouteUpdate (2.2 新增)         在当前路由改变（/foo/1 和 /foo/2 之间跳转的时候
  ）会有一个问题   由于该组件被复用   组件没有被销毁   导致写在created钩子函数的数据请求函数只会在页面创建的时候执行一次   跳转的时候不会再次执行请求数据    解决方法  ： 在next（）钩子函数后面 重新调用请求数据的方法 就可以请求数据
• beforeRouteLeave          离开该组件件时调用此路由守卫   离开时做一些表单提交的提醒  

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