1.什么是Vue路由导航守卫?

官网:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

导航守卫分为全局守卫,其中包括全局前置守卫,全局后置守卫,全局解析守卫,还有独享守卫,组件守卫等等

如果说拦截器是兢兢业业端着茶缸,登记每一个进出小区的门卫大爷,那么我愿称导航守卫为一群训练有素的的巡逻保安,

接下来谈下常用的两种守卫

1.全局前置守卫beforeEach

路由跳转之前, 会触发一个函数(全局前置守卫)

应用场景:权限控制───由全局前置守卫来决定是否放行

基本的语法

const router = createRouter({ ... })
router.beforeEach((to, from) => {// ...// 返回 false 以取消导航return false
})

全局前置守卫里面有三个参数,其含义分别是

to: 向那个路径而去
from: 从那个路径而来
next: 函数, 是否放行
next(false) //不放行
next() //放行
//例如:强制跳转到 /find页面
next(‘/find’)

注意:需要跳转时一定要调next(), 才会跳转下一页
具体用法示例:

const islogin = false    //注册全局守卫
router.beforeEach((to, from, next) => {if (!islogin && to.path === '/my') {alert('请先登录后跳转!')return next(false)// return next('/find')  //未登录强制跳转某页面}next()//放行
})

2.全局后置守卫afterEach

全局后置守卫不会改变导航本身,只是再跳转之后做判断

应用场景:跳转后的页面进行例如滚动条回调0 0 位置、更新页面title、懒加载结束等

基本的语法

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

注意:afterEach不接收第三个参数 next 函数
具体场景示例:

//后置导航守卫
router.afterEach(() => {//进度条结束NProgress.done()
})

巡逻保安───导航守卫相关推荐

路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
导航守卫又称为路由守卫
路由进阶部分 – 导航守卫( 路由守卫 ) 作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式全局导航守卫用的时候写在主文件中(main ...
导航守卫（也叫路由守卫）
导航守卫(也叫路由守卫) 作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 - A: 全局导航守卫 . 全局前置守卫 router.be ...
【vue-router②】使用导航守卫控制页面前进刷新，后退缓存
之前给大家分享了利用keep-alive进行缓存你想要的页面,然后到后面会出现这样的问题: 我有三个组件A(组件).B(A中的弹框).C(组件),其实算是两个组件,一个弹框,现在他们的关系是这样的: ...
Vue-router进阶：导航守卫
全局前置守卫使用router.beforeEach注册一个全局前置守卫. const router = new VueRouter({...}) router.beforeEach((to,from ...
vue 按需加载，换存，导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
解决导航守卫router.beforeResolve使用不了this.$store
在vue router的导航守卫如beforeEach()中是无法直接通过this.$store去操作vuex的,因为这里的this指向不一致. 正确写法 import store from '../ ...
vue中的组件导航守卫，个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面新增模块按钮和编 ...

巡逻保安───导航守卫

1.什么是Vue路由导航守卫?

1.全局前置守卫beforeEach

2.全局后置守卫afterEach

巡逻保安───导航守卫相关推荐

最新文章

热门文章