VueRouter路由守卫

Vue 专栏收录该内容
19 篇文章 0 订阅

最近学习一个商城项目的时候出现了一个请求,就是当我点击个人主页的时候,如果已经登陆并且没有超时的情况下会跳转到个人中心,但是如果没有登陆,或者登录超时了,那么就会跳转到登录界面,需要完成这个需求我们就必须使用路由守卫。

1.路由守卫是什么?

路由守卫简单的来说就是路由在跳转的时候所触发的一些钩子函数

2.导航守卫的分类

1)全局前置守卫——发生在路由跳转前

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中

const router = new VueRouter({ ... })

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

2)全局解析守卫——发生在路由跳转前

可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => {
  // ...
})

3)全局后置钩子——发生在路由跳转后,组件路由跳转前

router.afterEach((to, from) => {
  // ...
})

4)路由独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

5)组件内守卫

可以在路由组件内直接定义以下路由导航守卫:

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave
    const Foo = {
      template: `...`,
      beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      },
      beforeRouteUpdate(to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }

 

3.守卫的回调参数

  • to:目标路由对象;

  • from:即将要离开的路由对象;

  • next:他是最重要的一个参数,他相当于佛珠的线,把一个一个珠子逐个串起来。

 

4.完整的导航解析

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <span style="font-size:16px;color:#009900;"><strong>Vue3.0来了,你还学的动吗?</strong></span> </p> <p> <br /> </p> <p> 2020年9月底,Vue3.0正式版终于发布了。Vue<span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">在全球拥有 130 多万用户 ,它被应用于各种不同的场景中。而在国内,更是<span>最火热的前端框架,<span>2.0与3.0的开发模式有了很大的改变,所以</span>3.0的全新版本势必会引发新的一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握的。</span></span> </p> <p>   </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好的掌握Vue开发企业项目的流程 。<br /> </span> </p> <p> <br /> </p> <p> <span id="__kindeditor_bookmark_end_43__"></span><span style="color:#009900;font-family:-apple-system, BlinkMacSystemFont, "font-size:16px;background-color:#FFFFFF;"><strong>本课程共包括三个模块</strong></span> </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">一、<strong>Vue基础篇</strong></span> </p> <p> <span style="background-color:#FFFFFF;">本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命周期等内容。</span><span style="background-color:#FFFFFF;color:#121212;">会带你深入理解Vue组件化技术,讲解全局组件和局部组件的定义,组件间数据传递,以及Vue内置组件等知识点。让你掌握模块化的概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,</span><span style="color:#121212;">让你快速入门Vue3.0。</span><span style="background-color:#FFFFFF;color:#121212;"></span> </p> <p> <span style="background-color:#FFFFFF;color:#121212;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">二、<strong>Vue核心篇</strong></span> </p> <p> <span>这个模块会带你讲解Vue3.0全家桶的知识点(Vue Router路由+Vuex状态管理),涉及Vue路由的用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制及使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。</span> </p> <p> <span><br /> </span> </p> <p> <span style="background-color:#FFFFFF;"> </span> </p> <p style="color:#121212;"> 三、<strong>项目实战篇</strong> </p> <span style="color:#121212;"></span> <p> 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用的真实流程,更好的掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。 </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#009900;"><strong>实战项目涉及内容</strong></span> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202010240323559662.png" /> </p> <p> <br /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值