Vue路由钩子函数

<template>
	<div>
		<input type="text" v-model="username" />
		<button @click="toUserList">跳转到列表页</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: ""
		}
	},
	methods: {
		toUserList() {
			// 编程式导航，vue-router标签形式的为声明式导航
			this.$router.push("/user/list");	
		}	
	},
	// 路由跳转前
	beforeRouteLeave(to,from,next) {
		// 判断有没有跳转权限
		if(this.username) { 
			let flag = window.confirm("你确定离开吗？");
			if(flag) {
				next();
			}	else {
				next("/login"); // 跳转到登陆页
			}
		}
	},
	// 路由进入前
	beforeRouteEnter(to,from,next) {
		// 判断路由从哪跳转过来的,为true允许跳转
		if(from.name === "userAdd") {
				console.log("从添加用户过来的");
				next();
		}
		// next()中也可以添加一个回调函数
		// 组件渲染完毕 会调用beforeRouteEnter中的回调函数
		next((vm)=>{
			console.log(vm);	
		})
	}
}
</script>

只要组件切换了，就调用钩子函数，在main.js中添加一个全局的函数

// 进入新的页面
router.beforeEach((to,from,next)=>{
	console.log("all");
	next();
};
// 当前路由解析后
router.beforeResolve((to,from,next)=>{
	console.log("resolve");
});
// 当前进入完毕（用的不多）
router.afterEach((to,from,next)=>{
	console.log("after");
})

路由的生命周期钩子函数也可以写在路由规则中。如下：

{
	path: "add",
	name: "userAdd",
	component: UserAdd,
	beforeEnter(to,from,next) {
		console.log("路由规则中的钩子函数");	
		next();
	}
}

执行顺序总结

• 进入新的页面 beforeEach
• 进入路由的配置当中 beforeEnter
• 组件进入时的钩子 beforeRouteEnter
• 组件离开时的钩子 beforeRouteLeave
• 解析完成 beforeResolve
• 当前进入完毕 afterEach
• 组件渲染完毕 会调用beforeRouteEnter中的回调函数