vue-router（路由守卫以及相关生命周期）

路由守卫

组件的生命周期（钩子函数）

1.beforeCreate(){}：组件创建之前

2.created(){}：组件创建完成

3.beforeMount(){} ：组件模板挂载之前

4.mounted(){}：模板挂载完成

5.beforeUpdate(){}：组件数据更新之前

6.updated(){}：组件数据更新完成

7.beforeDestroy(){}：组件销毁之前

8.destroyed(){}：组件销毁后

全局路由守卫&&路由独享守卫

1.全局前置守卫

在组件解析之前触发导航时调用：（参数to和from都是路由对象Route）

to:即将要跳转的目标路由对象

from:即将要离开的目标路由对象

next():回调的函数(必须执行)，在前置守卫中通过to获取对应参数，判断相对应跳转的组件或者其他操作(如果不写next()函数将进入死循环)

next()是一个函数,该函数的使用方法
** next(): 无参数直接执行，表示进入下一个 生命周期，如果所有的 钩子函数都执行完了(生命周期/守卫)，则导航状态就是confirmed(确认的)
** next(false): 中断当前导航，重置到 from 路由对应的地址。
** next(’/xx’) or next({path:’/xxx’}): 中断当前的导航， 进行一个新的导航，跳转到一个指定的 地址。可传参数 与 route.push方法一致
** next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

beforeEach((to,from,next)=>{

	console.log(to.meta)
	
	next()
	
})

2.全局解析守卫 （在组件解析之后调用）

具体的使用带业务逻辑进行编辑和调用，通过to和from的传参进行对应的逻辑处理

beforeReslove((to,from,next)=>{

	document.title = to.matched[0].meta.title;
	
	console.log(to.meta)
	
	next()
	
})

3.全局后置钩子

在所有路由跳转结束的时候调用(离开组件进行调用，通过to和from的解析和参数的传递进行判断，具体业务逻辑具体实现)

afterEach((to, from)=>{

	console.log(to.meta)
	
})

4.（路由独享守卫）用法和beforeEach()一样，在它之后执行，在其他守卫之前

beforeEnter(()=>{

	document.title = to.matched[0].meta.title;
	
	next()
	
})

组件路由守卫

1.组件渲染时被调用

此时获取不到this实例对象，next（）//进入下一个钩子函数

beforeRouteEnter (to, from, next) {

 next(vm => {
 
	//可以通过回调访问 此时能获取对应的实例对象以及对vue实例进行具体操作
	
})
  
}

2.组件再次调用（重用时）

组件重新调用时会调用该函数，此时能获取对应的实例对象以及对vue实例进行具体操作

beforeRouteUpdate(to, from, next) {
	cosole.log(to)
  next( )
  
}

3.组件离开时进行调用，

当前组件离开时被调用，可以访问当前组件的this实例以及vue实例对象

beforeRouteLeave(to, from, next) {
	cosole.log(to)
  next( )
  
}

补充 路由守卫的调用顺序：

beforeRouteLeave (离开组件的)

beforeEach(全局路由) 

beforeRouteEnter(跳转到的路由组件内的)

afterEach(全局路由) 

vue实例的生命周期