下面我就为大家分享一篇基于vue2.x的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。
最近上班有些忙，好久没有更新文章，也没学习新的东西。
今天来说说这个路由钩子吧。
导航和钩子函数：
导航：路由正在发生改变 关键字：路由 变
立即学习“前端免费学习笔记（深入）”；
钩子函数：在路由切换的不同阶段调用不同的节点函数（钩子函数在我看来也就是：某个节点和时机触发的函数）。
钩子函数 主要用来拦截导航，让它完成跳转或取消，在导航的不同阶段来执行不同的函数 ，最后钩子函数的执行结果会告诉导航怎么做。。
导航在所有钩子 resolve 完之前一直处于 等待中，等待钩子函数告诉它下一步该怎么做。用next()来指定。
我来给大家举个登陆的例子
router.beforeEach(({meta, path}, from, next) => { const {auth = true} = meta // meta代表的是to中的meta对象，path代表的是to中的path对象 var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录 if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 return next({ path: '/login' }) // 跳转到login页面 } next() // 进行下一个钩子函数 })
登录后复制
先说这个beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。
它的三个参数：
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用
next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
全局钩子函数之 全局的afterEach钩子：
after 钩子没有 next 方法，不能改变导航，代表已经确定好了导航怎么去执行后，附带的一个执行钩子函数
组件内的钩子函数：（ beforeRouteEnter 和 beforeRouteLeave 再加一个 watch函数 ）
vue2.X的组件内钩子函数比vue1.X减少了许多。。
使用组件自身的生命周期钩子函数来替代 activate 和 deactivate
在 $router 上使用 watcher 来响应路由改变
canActivate 可以被 router 的配置中的 beforeEnter 中实现
canDeactivate 已经被 beforeRouteLeave 取代, 后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。
canReuse 已经被移除，因其容易混淆且很少被用到。
用ajax获取数据的data(to, from, next) 钩子用组件内 beforeRouteEnter (to, from, next)来替代
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue-cli项目中proxyTable跨域问题
在vue-cli项目中proxyTable跨域问题
在vue-cli项目中proxyTable跨域问题
以上就是在Vue2.X中使用路由和钩子函数的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3188030.html
