Vue 进阶（十八）：router.beforeEach 与 router.afterEach 钩子函数

华强

关注

发布于: 3 小时前

Vue进阶（十八）：router.beforeEach 与 router.afterEach 钩子函数

一、前言

路由跳转的时候，我们需要做一些权限判断或者其他操作。这个时候就需要使用路由钩子函数。

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

总体来讲，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"    }]

复制代码

在子组件中调用路由钩子函数是无效的。

在官方文档上是这样定义的：

可以在路由组件内直接定义以下路由导航钩子：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

这里简单说下钩子函数用法：它是和data,methods平级的。

beforeRouteLeave(to, from, next) {    next()},beforeRouteEnter(to, from, next) {    next()},beforeRouteUpdate(to, from, next) {    next()},data:{},method: {}

复制代码

发布于: 3 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/e1562591a0c58c2f036ccceaf】。文章转载请联系作者。

华强

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（十八）：router.beforeEach 与 router.afterEach 钩子函数

一、前言

二、全局钩子函数

三、路由钩子函数

四、路由组件钩子

华强

评论