DDR爱好者之家 Design By 杰米
在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲vue里面提供了三大类钩子,两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子
两种函数:
1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
2.Vue.afterEach(function(to,form))/*在跳转之后判断*/
全局钩子函数
顾名思义,它是对全局有效的一个函数
router.beforeEach((to, from, next) => { let token = router.app.$storage.fetch("token"); let needAuth = to.matched.some(item => item.meta.login); if(!token && needAuth) return next({path: "/login"}); next(); });
beforeEach函数有三个参数:
- to:router即将进入的路由对象
- from:当前导航即将离开的路由
- next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
afterEach函数不用传next()函数
某个路由的钩子函数
顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。
const router = new VueRouter({ routes: [ { path: '/login', component: Login, beforeEnter: (to, from, next) => { // ... }, beforeLeave: (to, from, next) => { // ... } } ] })
路由组件的钩子
注意:这里说的是路由组件!
路由组件 属于 组件,但组件 不等同于 路由组件!所谓的路由组件:直接定义在router中component处的组件。如:
var routes = [ { path:'/home', component:home, name:"home" } ]
在子组件中调用路由的钩子函数时无效的。
在官方文档上是这样定义的:
可以在路由组件内直接定义以下路由导航钩子
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
这里简单说下钩子函数的用法:它是和data,methods平级的。
beforeRouteLeave(to, from, next) { next() }, beforeRouteEnter(to, from, next) { next() }, beforeRouteUpdate(to, from, next) { next() }, data:{}, method: {}
PS:在使用vue-router beforeEach钩子时,你也许会遇到如下问题:
源码:
router.beforeEach((to, from, next) => { //判断登录状态简单实例 var userInfo = window.localStorage.getItem('token'); if (userInfo) { next(); } else { next('/login'); } })
然后你会发现出现如下错误:出现dead loop错误
解决方案:
router.beforeEach((to, from, next) => { var userInfo = window.localStorage.getItem('token');//获取浏览器缓存的用户信息 if(userInfo){ //如果有就直接到首页咯 next(); } else { if(to.path=='/login'){ //如果是登录页面路径,就直接next() next(); } else { //不然就跳转到登录; next('/login'); } } })
解决思路:
排除此时地址 = 转向的地址 的情况,避免dead loop, 问题很简单,但一不小心就入坑了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 交错战线研发中心推荐角色一览
- 交错战线合成工厂推荐角色一览
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]