动手理解Vue导航守卫
转载自动手理解导航守卫(Vue)
最近不是很忙,把自己不会的技术点看了一遍文档,然后动手敲了一下代码,加深自己理解。通过实战Demo,调试,结果分析,理解了官网的知识点。记录下来,第一是方便自己加深理解,第二是后续可以回顾,第三可以帮助像我这种小白的人一起学习。
导航就是我们说的路由,当路由发生变化的时候,我们想要做的事情,这就是导航守卫的重点。
路由改变的函数我们写到项目的哪个位置,代码写哪个地方,这个就是官网上说的(全局守卫,路由独享的守卫,组件内的守卫),下面一一介绍:
(一)全局守卫:
用来监测所有的路由,代码写在路由页面(router.js)
方法有:
router.beforeEach((to, from) => {// ...
})
router.afterEach((to, from) => {// ...
})
复制代码
复制代码复制代码
to,from,next三个参数都是必要的
to: 即将要进入的目标 路由对象
from: 当前导航正要离开的路由
next:一定要调用该方法来 resolve 这个钩子,如果不写next()或者next(false),页面路由不会跳转,也就是页面被阻止在当前页面了
to,from是一个对象,就是routes[] 数组里面配置的某个具体的路由对象,
比如:to.path, to,name, to.meta 等等
from.path, from.name, from.meta 【path,name,meta】这些字段都是自己在路由里面定义的字段,这样就可以开始写逻辑了。
(二)路由独享守卫:
就是将路由钩子函数写在我们的某个具体路由对象里面:
这些守卫与全局前置守卫的方法参数是一样的,里面可以开始写逻辑。
(三)组件内的守卫:
我们写的vue页面,
常用方法:
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
这些守卫与全局前置守卫的方法参数是一样的,里面可以开始写逻辑,注意点:beforeRouteEnter
守卫 不能 访问 this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
官网整个路由守卫被触发流程的步骤:
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
动手理解Vue导航守卫相关推荐
- 55. VUE 导航守卫
就是 如果你想跳转路由的时候干点什么 那么就用导航守卫,例如更换标题,当然你可以用生命周期函数,在我看来不切实际. 点击首页标题换首页 ,点击个人 标题换个人: 全局导航守卫 vue-router提 ...
- vue 导航守卫(一) 之 全局前置守卫全局后置守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. beforeEach-全局前置钩子 基础语法: co ...
- vue中的组件导航守卫,个人理解
vue中组件导航守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave 今天有遇到一个问题,就是在一个页面 新增模块按钮 和 编 ...
- Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!
目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名
- Vue路由守卫(导航守卫)及使用场景
目录 前言 一.路由守卫是什么? 二.路由守卫全解析 先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫 单独介绍一下路由守卫钩子三个参数 前言 最近在学习vu ...
- vue路由守卫中next方法的理解
vue路由守卫中next方法的理解 在网上看到了一篇通俗易懂的文章,此文章出处 在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
- vue 按需加载,换存,导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
- vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件 导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
- VUE全局导航守卫、 请求、响应拦截器 的设置
文件设置参考地址:https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7 ...
最新文章
- linux系统reboot怎么退出,Linux系统肿么退出?
- Matlab符号运算总结
- 大唐电信JAVA笔试题面试题
- Windows下载Android源代码
- powerbi和python区别_PowerBI和Python关于数据分析的对比
- Elasticsearch之插件介绍及安装
- 用大数据算法得出当代移动互联网人群图鉴
- 黯然推荐:王江民先生悼文(文言)
- Javascript特效:侧边广告
- 图卷积网络详细介绍(二)
- pitch yaw roll是什么
- Github优质项目推荐(附国内Gitee地址)
- 综述(十)北京在安全测试示范区上的政策与成果数据分析
- Java软件工程师职位分析
- 很多人问如何把网页封装成app呢?
- 507. 完美数-c语言
- 支付宝的蚂蚁积分用途很多,别不当回事儿,用得好能省很多钱哦!
- html模拟手机页面
- 大数据平台的使用(Hadoop 生态圈、CDH)
- 36kr2.0上线了-正中要害
热门文章
- 践行“健康中国”战略-李忠:谋定功能性原生态农业大健康
- MySQL导出表结构相关字段以及把字段由下划线转驼峰命名
- Python3的unittest用例按编写顺序执行
- mysqldump: command not found
- Echart在Openlayers的应用-热力图
- SQL 注入工具集合
- OBIEE 11g:Error:nQSError 36010 Server version 318 cannot read the newer version of the repository
- IOS开发 Block的学习
- 实现 scrollview 默认显示指定的页码
- 熟悉Redhat 9.0