Question

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

Answer 1

对于Vue 2.0：

beforeCreate
创建
beforeMount
安装
更新前
更新
beforeDestroy
破坏

现在使用vue-router 2.0时，数据提取可以在两个地方完成，按照doc：

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

导航前获取：在路线中导航之前获取数据   输入保护，并在获取数据后执行导航。

对于您的情况，您可以在函数中写入数据获取逻辑，并在＆＃34;创建的＆＃34;内部调用它。组件lifecylce的钩子。如果所有数据都随路径发生变化，那么在$ route对象上写一个观察者，这将触发你的数据获取功能。

由于vue-router 0.7的数据挂钩已被弃用，而$ route对象已被反应。阅读更多here。

Answer 2

为什么不为每个人添加控制台日志并自己查看？

据我所知，未经测试：

canReuse
canActivate

- 现在正在创建组件实例：

创建
beforeCompile
编译

- （不确定准备好或激活先出现，但我想准备好了）

准备好了
激活
数据

对于您的特定情况，数据提取应该在数据挂钩中进行 - 毕竟这就是它的用途。

Answer 3

也许您对组件内防护（在使用Vue Router加载的组件中可用的附加挂钩）感兴趣

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

如果您使用Vue + Vue路由器，并且在RouteA上，并从其导航到RouteB，则每个路由/组件都会在“ created”上注册某些内容（例如，接收root支持的数据），而在“ beforeDestroy”上取消注册，但是当您离开RouteA，在创建“ RouteB”之后调用它的“ beforeDestroy”，因此您没有任何注册！我已经测试过了，VUE 1的顺序正确。必须在VUE 2 + VUE Router 2中的某个位置进行更改。

从RouteA到RouteB时，VUE 1中的正确/预期挂钩顺序：

销毁前的路线
创建了RouteB

从RouteA到RouteB时，VUE 2中的钩子顺序错误/异常：

创建了RouteB
销毁前的路线

解决方案是对VUE 2 + VUE路由器2使用“ created” +“ beforeRouteLeave”。

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

3 个答案: