Vue路由Router钩子（全局2+组件3+配置2）

路由钩子

一. 导航守卫(全局钩子*2)

一般在全局的路由配置中设置

// 前置守卫 还没有出 from 的路由
router.beforeEach((to, from, next) => {
     
	to: 即将要进入的目标 路由对象
	from: 当前导航正要离开的路由
	next: 一定要调用这个方法 不然会停在一个白板页面的
		next() 允许跳转
		next(false) 不允许跳转
		next('url') 跳转到指定url
})
// 后置守卫  已经进入到 to 的路由
router.afterEach((to, from) => {
     
  to: 到哪去
  form: 从哪来
  next()
})

各个参数中保存的信息(to/from就是相应路由的路由信息 -> this.$router)

路由跳转 导航守卫做的事

二. 路由对应组件中的钩子*3

// 1. 进入路由 所对应组件最早执行的钩子 早于 vue生命周期
beforeRouteEnter (to, from, next) {
     
	// 1. 这个钩子的执行还在 beforeCreate 之前
	// 2. 当组件被缓存时 created 就不会被反复执行了  但是这个可以
	// !!! 注意  这里是不能访问 this (vue实例的) 要是想访问实例的话可以 传一个回调给next vue实例就是参数
	console.log('this' , this) // undefined
	next(app => {
     
		console.log('vue实例' , app)
	})
},

通过打印是可以看到 参数获取到的就是 vue实例(this)

// 2. 路由刷新
beforeRouteUpdate (to, from, next) {
     
	// 1. 在当前路由跳转当前路由 (比如当前路径:/xxx/:id) 
	//		由 /xxx/1 跳转 /xxx/2 时 就会执行这个钩子
	// 2. 可以访问 this
	next()
},
// 3. 路由离开
beforeRouteLeave (to, from, next) {
     
	// 1. 路由一离开就执行 这个是在跳转的路由组件的 beforeCreate 之前执行
	// 2. 这个不像 beforeDestroy 会在跳转路由组件的 beforeMount 和 mounted 之间执行 
	//		因此可以做一些 善后工作  而不用考虑是否会把跳转组件的 created 钩子中所做的某些变化覆盖
	// 			比如 清空定时器 / 清空该页面特有样式 / 保存一些信息 等
	// 3. 可以访问 this
	next()
}

三. 某个路由的钩子*2

写在路由配置中

const router = new VueRouter({
     
	routes: [
		{
     
			path: '/login',
			component: () => import('../views/login/login.vue'),
			// 在进入路由前执行
			beforeEnter: (to, from, next) {
     
				// 可以参数的 不同 强行跳转到其他路由
				next()
			},
			// 离开路由前执行 好像要被废弃了
			beforeLeave: (to, from, next) {
     
				next()
			},
		}
	]
})