在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
两种函数：
1、router.beforeEach(function(to,form,next){}) /在跳转之前执行/
2.router.afterEach(function(to,form))/在跳转之后判断/
顾名思义，它是对全局有效的一个函数
- 即将进入的路由对象
- :当前导航即将离开的路由
- ,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数
在官方文档上是这样定义的：
可以在路由组件内直接定义以下路由导航钩子
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
这里简单说下钩子函数的用法：它是和data,methods平级的。
PS：在使用vue-router beforeEach钩子时，你也许会遇到如下问题：
然后你会发现出现如下错误：出现dead loop错误
主要介绍一下vuerouter的几种钩子函数：
每次跳转路由时都会执行这个钩子函数，由router调用
1、beforeEach(to,from,next)
页面加载之前执行，有三个参数
2、afterEach(to,from)
页面加载之后执行，有两个参数，没有next
- 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里
注意他们的使用方式，仔细看
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
到此这篇vue钩子函数有几种（vue8个钩子函数）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/54779.html