vue钩子函数有几种（vue8个钩子函数）

编程日记 • 2025-01-27 14:46 • 阅读 55

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

两种函数：

1、router.beforeEach(function(to,form,next){}) /在跳转之前执行/

2.router.afterEach(function(to,form))/在跳转之后判断/

顾名思义，它是对全局有效的一个函数

afterEach函数不用传next()函数

在官方文档上是这样定义的：

可以在路由组件内直接定义以下路由导航钩子

这里简单说下钩子函数的用法：它是和data,methods平级的。

PS：在使用vue-router beforeEach钩子时，你也许会遇到如下问题：

然后你会发现出现如下错误：出现dead loop错误

主要介绍一下vuerouter的几种钩子函数：

每次跳转路由时都会执行这个钩子函数，由router调用

1、beforeEach(to,from,next)

页面加载之前执行，有三个参数

2、afterEach(to,from)

页面加载之后执行，有两个参数，没有next

next有几种形式，一一解释一下

1、next()：可以跳转到目标路由

2、next(false)：不可以跳转，回到源路由

3、next(/path)：中断当前跳转路径，跳转到/path指定的路由

4、next(error)：当前跳转终止，并执行router.onError中的回调函数

小栗子：可以做一些页面跳转前的认证，对一些需要登录的页面进行拦截，跳转到登录页面

只要用于指定某个特定路由跳转时的逻辑,写在某个路由配置内部

1、beforeEnter()

2、beforeLeave()

在组件内使用

1、beforeRouterEnter()

2、beforeRouterLeave()

3、beforeRouterUpdate()：下一次更新之前

小栗子1：当页面中有需要保存的信息时，阻止页面进行跳转，让用户先保存信息

小栗子2：在用户关闭页面之前保存信息到vuex或session里

注意他们的使用方式，仔细看

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。