生命周期中的优先级与Vue.js和Vue-router挂钩

Yer*_*lma 5 vue.js vue-router

我用vue和建立一个应用程序vue-router.在某些路由中,我需要首先检查一些条件,如果不满足这些条件,然后重定向到另一个组件,所以我使用了我的组件选项activate上的钩子router,它工作正常.另外,在同一个组件中,我有vue created挂钩来加载一些数据,问题是如果我之前提到的那些条件不满足,那么我就无法在创建的钩子中加载数据.我期望的是,如果不满足该条件,并且调用重定向钩子,则创建的钩子不会被触发,但实际发生的是该条件为假,然后激活钩子的重定向被调用以及来自Vue的创建钩子.因此,除了我的特定用例的解决方案之外,我想知道在一起使用vue和vue路由器时钩子的执行顺序.

Dee*_*pak 8

对于Vue 2.0:

  1. beforeCreate
  2. 创建
  3. beforeMount
  4. 安装
  5. 更新前
  6. 更新
  7. beforeDestroy
  8. 销毁

现在使用vue-router 2.0时,数据提取可以在两个地方完成,按照他们的文档:

导航后获取:首先执行导航,然后获取传入组件生命周期钩子中的数据.在获取数据时显示加载状态.

在导航之前获取:在路径中导航之前获取数据进入防护,并在获取数据之后执行导航.

对于您的情况,您可以在函数中编写数据获取逻辑,并在组件lifecylce的"created"钩子内调用它.如果所有数据都随路径发生变化,那么在$ route对象上写一个观察器,这将触发你的数据获取功能.

由于vue-router 0.7的数据挂钩已弃用,而$ route对象已被反应.在这里阅读更多.