Vue.js前端Vue专辑前端开发笔记

vue 路由导航白话全解析

2019-03-27  本文已影响4人  啊木木

这里先放上官网的教程和说明:点击这里,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

上一篇下一篇

猜你喜欢

热点阅读