这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档

路由守卫

路由守卫说白了就是路由拦截,在地址栏跳转之前 之后 跳转的瞬间 干什么事

全局守卫

全局守卫顾名思义,就是全局的,整个项目所有路由,跳转所用到的守卫(拦截),设置了全局守卫之后,只要路由(浏览器地址栏)发生变化就会触发的事件

全局守卫分为二部分 前置守卫(跳转之前) 后置钩子(跳转之后)

前置守卫:
router.beforeEach
这个方法有三个参数
(to, from, next)
to:即将进入的地址,比如说 点击按钮 从 A 跳转到 B ,那么to就是 B 的路由对象,
from:要离开的地址,比如说 点击按钮 从 A 跳转到 B ,那么to就是 A 的路由对象,
next:就是在跳转的时候要执行的事件,比如说 点击按钮 从 A 跳转到 B ,然后我在next执行了一个方法 next({ path: ‘/C’ }) 这样就会跳转到C 页面,而不是 B 页面了,这就是路由拦截了,如果这么写的话 不管你愿来是想从 那个页面 跳转 那个页面 他都会给你跳转到 C 页面
在这里就可以判断,如果满足一定的条件 就让他 next({ path: ‘/C’ }) 就是满足一定的条件 才让他跳转到C 不满足的时候 就正常跳转

这里next 还有一个作用 next(false) 这样会中断路由的跳转 比如说 点击按钮 从 A 跳转到 B 然后我执行了 next(false) 那么浏览器就不会进行跳转 从新回到A页面 这样就阻止了路由的跳转 在这里就可以判断,如果满足一定的条件 就让他 next(false) 这样就不进行跳转了

路由独享守卫

顾名思义:就是这个守卫,只是单独的这个组件独享的,局部的,不是全局的,只有这个路由在进行跳转的时候,才会触发的,其他的组件,路由进行跳转的时候不执行这个方法

独享守卫有三个方法:
beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用 就是页面跳转前要执行的方法 要干的事

beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用 就是当页面 在A 跳转到 B 的一瞬间 要干的事

beforeRouteLeave 导航离开该组件的对应路由时调用 就是在跳转完成之后 要干的事

这三个方法 都有三个参数 (to, from, next) 跟全局守卫的 三个参数用法一样

其中 beforeRouteEnter 守卫 不能 访问 this 其他两个守卫可以访问到this

vue 路由导航白话全解析的更多相关文章

  1. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  2. Vue 路由导航解析流程

    Vue Router完整的导航解析流程

  3. vue路由导航守卫及前置后置钩子函数参数详解

    首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...

  4. vue路由\导航刷新后:ative\localStorage\url截取参数

    <el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  7. 【VUE】5.路由导航守卫

    1. 功能需求 1. 当用户登陆成功后,把得到的token存到Session Storage 2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果 ...

  8. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  9. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

随机推荐

  1. Android的设置界面及Preference使用

    一般来说,我们的APP都会有自己的设置页面,那么其实我们有非常简单的制作方法.老样子,先看效果图. 然后就是看源代码了. 第一步,先在res文件夹中新建一个xml文件夹,用来存放preferences ...

  2. 【289】◀▶ Python I/O & 读写文本文件

    参考:Python 文件 I/O 参考:Python OS 文件/目录方法 目录: 01   open 函数 用于打开一个文件,创建一个 file 对象,相关的方法才可以调用它进行读写. 02   F ...

  3. 可变、不可变数据类型和hash

    一.可变和不可变数据类型 在python中,我们对数据类型除了分为数字类型.字符串类型.列表类型.元组类型.字典类型和集合类型外, 还有另外一种分类方式,我们给数据类型分为可变数据类型和不可变数据类型 ...

  4. 安卓 textview 换行 不满就换了

    public static String ToDBC(String input) { char[] c = input.toCharArray(); for (int i = 0; i < c. ...

  5. Spring总结七:AOP动态代理的实现

    Spring中的AOP代理可以使JDK动态代理,也可以是CGLIB代理,前者基于接口,后者基于子类. 首先我们来用代码简单演示jdk动态代理: 现在有一个商品的增删改查的操作 /** * 商品操作接口 ...

  6. Postman之token动态获取

    目前项目涉及PC及APP端接口共用问题,后台接口给登陆后的用户设置了一个token,接口调用时请求头的参数值必须要动态生成,为了解决这个问题,查看Postman API文档,配置了可以方便后端开发者的 ...

  7. 用gdb+nm调试php c extension程序

    .so写好了是给php脚本调用的,如果php脚本执行崩掉了,.so也只能在进程中饮恨而终,这时候php脚本调试经常用的echo, print_r, var_dump都派不上用场了.即使能打印一点儿错误 ...

  8. linux 下搭建LAMP

    http://www.mizuiren.com/414.html 写的非常好

  9. java实现微信H5支付

    前面做了app微信支付的回调处理,现在需要做微信公众号的支付,花了一天多时间,终于折腾出来了!鉴于坑爹的微信官方没有提供Java版的demo,所以全靠自己按照同样坑爹的文档敲敲敲,所以记录下来,以供自 ...

  10. 六.使用list和tuple

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: classmates = ...