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

最新推荐文章于 2025-07-10 10:01:45 发布

落叶~

最新推荐文章于 2025-07-10 10:01:45 发布

阅读量483

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue学习

本文链接：https://blog.youkuaiyun.com/weixin_43913219/article/details/104235141

Vue学习专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了Vue-router中的路由钩子函数，包括如何在路由配置文件和组件模板中定义钩子。在路由配置文件中，重点讨论了beforeEnter钩子，及其参数的用法，如控制路由跳转的next函数。而在组件模板中，提到了beforeRouteEnter和beforeRouteLeave两个钩子，分别用于路由进入前和离开前的操作。这些钩子函数对于管理和控制应用的导航流程至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，写在模板中就可以有两个钩子函数可以使用：

beforeRouteEnter：在路由进入前的钩子函数。
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>