大家好，又见面了，我是你们的朋友全栈君。
一、前言
路由跳转的时候，我们需要做一些权限判断或者其他操作。这个时候就需要使用路由钩子函数。
定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲，vue提供三大类钩子，
- 全局钩子
- 某个路由的钩子
- 组件内钩子
两种函数：
-
Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ -
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"
}
]
在子组件中调用路由钩子函数是无效的。
在官方文档上是这样定义的：
可以在路由组件内直接定义以下路由导航钩子：
beforeRouteEnterbeforeRouteUpdate(2.2 新增)beforeRouteLeave
这里简单说下钩子函数用法：它是和data,methods平级的。
beforeRouteLeave(to, from, next) {
next()
},
beforeRouteEnter(to, from, next) {
next()
},
beforeRouteUpdate(to, from, next) {
next()
},
data:{
},
method: {
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/149043.html原文链接：https://javaforall.net
