美文网首页
路由钩子函数

路由钩子函数

作者: 古城凌三少 | 来源:发表于2022-05-13 09:49 被阅读0次

全局钩子函数:

    beforeEach:

      beforeEach一共接收三个参数,分别是to、from、next;to:即将进入的路由对象;from:正要离开的路由对象;next:路由的控制参数;

      next一共有四种调用方式:

      next():一切正常调用这个方法进入下一个钩子;

      next(false):取消路由导航,这时的url显示的是正要离开的路由地址;

      next('/login'):当前路由被终止,进入一个新的路由导航(路由地址可以自由指定)

      next(error):路由导航终止并且错误会被传递到router.onError()注册过的回调中;

    我们一般是用全局钩子来控制权限,像什么进页面没有登录就跳登录页,需要用户达到什么级别才能访问当前页面都是属于页面权限控制,都是可以通过beforeEach钩子函数来实现

AfterEach:

      AfterEach和beforeEach一样都是属于全局守卫钩子,都是在main.js中进行调用;其中AfterEach比beforeEach少一个next参数;

      to:即将要进入的路由对象;

      from:正要离开的路由对象;

      afterEach()我们一般用来重置页面滚动条位置:

      假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面的滚动条位置就会在上一个页面停留的位置;这个时候我们就可以利用afterEach进行重置:

组件内的钩子函数:

    beforeRouteEnter(to,from,next):

    在路由进入前调用,因为此时的vue实例还没有创建,所以beforeEnter是唯一一个不能使用this的钩子函数;

    to:即将要进入的路由对象;

    from:正要离开的路由对象;

    next:路由控制参数

    beforeRouteUpdate(to,from,next):

    在路由发生修改的时候进行调用,比如我们上一篇文章讲到的动态路由传参,这种情况我们的beforeRouteUpdate也是会被调用的;

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数;

    beforeRouteLeave(to,from,next):

    在路由离开该组件时调用;

    

     to:即将要进入的路由对象;

     from:正要离开的路由对象;

     next:路由控制参数

注意:beforeRouteEnter因为触发的时候vue实例还没有创建,所以这个钩子函数中不能使用this,而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的,因为当这两个函数触发的时候实例都已经被创建了;

相关文章

  • 2021-04-11

    vue-router 路由钩子函数(导航守卫) 路由钩子函数有三种: 全局钩子: beforeEach(全局前置守...

  • Vue-router 学习笔记

    路由钩子函数

  • Vue视频教程系列第三十五节—路由器里的钩子函数

    路由钩子函数介绍: 我之前有介绍过vue里的钩子函数,有四对,也就是八个钩子函数。在路由里呢,其实也有钩子函数,个...

  • vue router.beforeEach(({meta, pa

    导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩...

  • Vue-Router路由钩子函数(导航守卫)

    —— “导航”表示路由正在发生改变。 路由钩子函数有三种: 1:全局钩子: beforeEach、 ...

  • vue路由钩子函数的实战用法

    —— “导航”表示路由正在发生改变。 路由钩子函数有三种:​ 1:全局钩子: beforeE...

  • vue-router方法的记录

    记录一下vue-router中的路由钩子函数的基本用法 路由钩子函数分为三种类型如下: 第一种:全局钩子函数。 r...

  • $route和$router的区别

    router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

  • [10]路由中的钩子

    资料来源于技术胖的个人网站 我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子...

  • vue 完善路由权限

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

网友评论

      本文标题:路由钩子函数

      本文链接:https://www.haomeiwen.com/subject/devdurtx.html