Vue钩子函数

Posted 2021-01-19 caodneg7

1.全局钩子：主要包括beforeEach和aftrEach,

这个beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。

beforeEach函数有三个参数：

• to: (Route路由对象)即将进入的路由对象 to对象下面的属性： path   params  query   hash   fullPath    matched   name    meta（在matched下，但是本例可以直接用）

• from: (Route路由对象)当前导航即将离开的路由

• next: (Function函数) 一定要调用该方法来 resolve 这个钩子。  调用方法：next(参数或者空)   *必须调用

  next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）

  next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航.

   

//使用钩子函数对路由进行权限跳转 的示例

指定跳转的逻辑

let router =  [
        {
          name: ‘home‘,
          path: ‘/‘,
          component: Home,
        },
        {
          name: ‘login‘,
          path: ‘/login‘,
          component: Login,
        },
        {
            name: ‘pay‘,
            path: ‘/pay‘,
            // path代表的是to中的path对象
            meta: { required_login: true },
            // meta代表的是to中的meta对象
            component: Pay,
        }
    ];

钩子函数:

routes.beforeEach(function (to, from, next) {
    console.log("to:", to);
    console.log("from:", from);
    console.log("next:", next);
    // 如果有权限就可以进入
    if (to.meta.required_login) {
        next(‘/login‘);
    } else {
        next();
    }
});

全局钩子函数之   全局的afterEach钩子：

• afterEach函数不用传next()函数

　　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)来替代

来源：CSDN 原文：https://blog.csdn.net/settingSun66/article/details/72801302