Vue导航守卫总结

导航守卫分为：全局的、单个路由独享的、组件内的

• 全局路由钩子：beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from)；

• 独享路由钩子：beforeEnter(to,from, next)；

• 组件内路由钩子：beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)

  	export default{
  	  beforeRouteEnter (to, from, next) {
  	    // 这里无法访问组件实例，this === undefined
          next( vm => {
            // 这里可以通过 vm 访问组件实例
          })
  	  },
  	  beforeRouteUpdate (to, from, next) {
  	    // 在当前路由改变，但是该组件被复用时调用(动态参数)
  	    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
  	    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  	    // 可以访问组件实例 `this`
  	  },
  	  beforeRouteLeave (to, from, next) {
  	    // 导航离开该组件的对应路由时调用
  	    // 可以访问组件实例 `this`
  	  }
  	}
  

	全局前置守卫: beforeEach		 ( 主要用于登录验证 )
	路由守卫: 	beforeEnter
	组件路由守卫: beforeRouterEnter
	全局解析守卫: beforeResolve
	全局后置守卫: afterEach
	组件生命周期: beforeCreate
				created
				beforeMount
				mounted
	beforeRouteEnter的next被调用

1、有next参数的钩子，必须调用next() 才能执行下一个钩子，否则路由不跳转

2、next(false)会中断路由导航 ( 主要用于登录验证不通过 )，url会被重置为from.path

3、next(path) 路由跳转

4、next(new Error())，导航终止，错误传递给 router.onError() 的回调