vue路由的钩子函数

在Vue.js中，当使用Vue Router进行页面路由管理时，你可以利用路由守卫（Route Guards）来实现路由的钩子函数。这些钩子函数允许你在路由发生变化时执行一些代码，比如权限验证、页面加载前的数据预获取等。Vue Router 提供了全局守卫、路由独享的守卫以及组件内的守卫。

1. 全局守卫

• beforeEach：全局前置守卫，在路由跳转前触发，每个路由跳转都会经过这个守卫。
• beforeResolve：在解析守卫之后调用，即在所有嵌套路径的组件内守卫和异步组件被解析之后调用。
• afterEach：全局后置钩子，路由跳转后触发，不接受 next 函数，也不会改变导航本身。

2. 路由独享的守卫

• beforeEnter：在路由配置中直接定义，进入路由前调用，参数为 to, from, next。

3. 组件内的守卫

• beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，此时组件实例还没被创建，不能获取组件实例 this。可以通过传一个回调给 next 来访问组件实例。
• beforeRouteUpdate (2.2+)：在当前路由改变，但是该组件被复用时调用，例如，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此这个守卫就被调用，而不是销毁后重新创建。
• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例 this。

示例

全局前置守卫 beforeEach

	router.beforeEach((to, from, next) => {
	// 权限验证等逻辑
	if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
	else next()
	})

组件内的守卫 beforeRouteEnter

	export default {
	beforeRouteEnter (to, from, next) {
	// 在渲染该组件的对应路由被 confirm 前调用
	// 不！能！获取组件实例 `this`
	// 因为当守卫执行前，组件实例还没被创建
	next(vm => {
	// 通过 `vm` 访问组件实例
	})
	}
	}

组件内的守卫 beforeRouteLeave

	export default {
	beforeRouteLeave (to, from, next) {
	// 导航离开该组件的对应路由时调用
	// 可以访问组件实例 `this`
	const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
	if (answer) {
	next()
	} else {
	next(false)
	}
	}
	}

路由守卫是Vue Router中非常强大的功能，能够让你对路由的导航过程进行精细的控制。

原文地址：https://blog.csdn.net/hexadecimal_001/article/details/140506468

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！