首页 > 其他分享 >vue导航触发流程

vue导航触发流程

时间:2023-01-06 16:35:47浏览次数:57  
标签:触发 vue 守卫 调用 组件 全局 导航

  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 的回调函数,创建好的组件实例会作为回调函数的参数传入

标签:触发,vue,守卫,调用,组件,全局,导航
From: https://www.cnblogs.com/MrZhous/p/17030852.html

相关文章

  • vue3+vite配置多页面
    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度。比如我们有很多H5页面,并且相互独立,比如报修,购卡,计价规则等等,那我们如......
  • vite+vue3项目在chrome中debuger源码
    在vue文件的script中打上一个debugger,本以为可以开心的debugger了,结果控制台看到的是这个样子查了一些方案,这样就可以解决了......
  • uni-app HBuilderX 工程转换 vue-cli 工程
    1、使用vue-cli4新建空工程vuecreate-pdcloudio/uni-preset-vuemy-project地址不行就直接下载,使用本地地址2、将HBuilderX工程内的文件(除unpackage、node......
  • vue3+ts利用el-table实现可编辑的表格
    说明在对表格数据进行操作时,如果数据项比较少,可通过自定义实现直接在表格中编辑。界面展示实现要点使用slot来自定义单元格,实现输入、选择等操作使用slot来自定义表......
  • vue 如何处理列表中展示进度的问题
      <template><divref="columnarStrip"class="columnarStrip"><divv-if="normal()"class="columnBox"><div:style="{width:widthPercent}"cl......
  • element ui可拖拽dialog-vue2
    文章目录​​1.准备js​​​​1.1`dialog-drag.js`​​​​1.2`index.js`​​​​2.`main.js`引用自定义指令​​​​3.使用​​1.准备js1.1​​dialog-drag.js​​......
  • Vue.set()和this.$set()介绍
    文章目录​​1.场景​​​​2.使用​​​​2.1`this.$set()`​​​​2.2`Vue.set()`​​1.场景当生成​​Vue​​实例之后,再次给数据赋值或者新增数据对象属性时,数据可以......
  • vue 配置代理
    如果接口请求存在跨域问题且后端暂没时间解决,可以通过vue-cli配置代理的方式解决:.env.development中设置VUE_APP_BASE_API=LocalLocal为该项目运行时的服务器地址,vue......
  • 在vue的v-for中,key为什么不能用index?
    写在前面在前端中,主要涉及的基本上就是DOM的相关操作和JS,我们都知道DOM操作是比较耗时的,那么在我们写前端相关代码的时候,如何减少不必要的DOM操作便成了前端优化的......
  • 写过vue自定义指令吗,原理是什么?.m
    背景看了一些自定义指令的文章,但是探究其原理的文章却不多见,所以我决定水一篇。如何自定义指令?其实关于这个问题官方文档上已经有了很好的示例的,我们先来温故一下。除......