Vuerouter中beforeEach与afterEach函数有什么区别

tangjin

作者

这篇文章将为大家详细讲解有关Vuerouter中beforeEach与afterEach函数有什么区别，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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

总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子

两种函数：

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

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

全局钩子函数

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

router.beforeEach((to,from,next)=>{

lettoken=router.app.$storage.fetch("token");

letneedAuth=to.matched.some(item=>item.meta.login);

if(!token&&needAuth)returnnext({path:"/login"});

next();

});

beforeEach函数有三个参数：

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

某个路由的钩子函数

顾名思义，它是写在某个路由里头的函数，本质上跟组件内函数没有区别。

constrouter=newVueRouter({
routes:[
{
path:'/login',
component:Login,
beforeEnter:(to,from,next)=>{
//...
},
beforeLeave:(to,from,next)=>{
//...
}
}
]
})

路由组件的钩子

注意：这里说的是路由组件！

路由组件属于组件，但组件不等同于路由组件！所谓的路由组件：直接定义在router中component处的组件。如：

varroutes=[
{
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)=>{
//判断登录状态简单实例
varuserInfo=window.localStorage.getItem('token');
if(userInfo){
next();
}else{
next('/login');
}
})

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

解决方案：

router.beforeEach((to,from,next)=>{
varuserInfo=window.localStorage.getItem('token');//获取浏览器缓存的用户信息
if(userInfo){//如果有就直接到首页咯
next();
}else{
if(to.path=='/login'){//如果是登录页面路径，就直接next()
next();
}else{//不然就跳转到登录；
next('/login');
}

}
})

关于Vuerouter中beforeEach与afterEach函数有什么区别就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

阅读全文

发布于 2021-03-17 20:54:57

vuerouter