6-8.Vue-router之路由的钩子函数

Vue-router

Vue-router路由的钩子函数

一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子函数可以写在路由的配置文件，也可以写在组件模板中。

在路由配置文件（/src/router/index.js） 中写钩子函数：

{
	path:'/params/:newsId(\\d+)/:newsTitle',
	component:Params,
	beforeEnter:(to,from,next)=>{
	console.log("from对象",from)
	console.log("to对象：",to);
	next();
}

其中，有三个参数(to,from,next)

• to:路由将要跳转的路径信息，信息是包含在对象里边的。
• from:路由跳转前的路径信息，也是一个对象的形式。
• next:路由的控制参数，常用的有next(true)和next(false)。

我们在程序中可以将to和from对象打印出来

	console.log("from对象",from)
	console.log("to对象：",to);

from对象中的path:就是跳转前的路径，to对象中的path就是跳转后的路径。

注意！注意！注意！

这里有一个next()函数，相当于一个开关，有以下三种情况：

• next(true)：开口打开，可以进行跳转
• next(false)：开口关闭，不能进行下一个跳转
• next({path:'跳转的路径'})：开口打开，跳到指定的路径

在组件模板写钩子函数

在配置文件中的钩子函数，只有一个钩子-beforeEnter，写在模板中就可以有两个钩子函数可以使用：

1. beforeRouteEnter：在路由进入前的钩子函数。
2. beforeRouteLeave：在路由离开前的钩子函数。

在src/components/params.vue文件中写钩子函数：

<script>
	export default{
		data(){
			return {
				msg:'这是一个关于传递参数的简单测试'
			}
		},
		beforeRouteEnter:(to,from,next)=>{
			console.log("准备进入params页面")
			next();
		},
		beforeRouteLeave:(tox,from,next)=>{
			console.log("准备离开params页面")
			next();
		}
	}
</script>