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

Question

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

Answer 1

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

据我所知，无需测试：

可以重复使用
可以激活

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

已创建
编译前
已编译

--（不确定是先准备好还是激活，但我猜准备好了）

准备就绪
激活
数据

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

Answer 2

对于 Vue 2.0：

创建前
已创建
挂载前
挂载
更新前
已更新
毁灭前
摧毁

现在使用 vue-router 2.0 时，可以在两个地方获取数据，根据他们的 doc:

Fetching After Navigation: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.

Fetching Before Navigation: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched.

对于您的情况，您可以在函数中编写数据获取逻辑，并在组件生命周期的 "created" 挂钩中调用它。如果数据随着路由发生变化，那么在 $route 对象上写一个 watcher，这将触发你的数据获取功能。

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

Answer 3

也许您对In-Component Guards（在使用 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 Router 并且你在 RouteA 并从它导航到 RouteB 并且每个 route/component 在 "created" 上注册一些东西（例如接收根支持的数据）并注销"beforeDestroy" 但是当你离开 RouteA 时它的 "beforeDestroy" 在 RouteB "created" 之后被调用所以你没有注册！我已经测试过了，VUE 1 的顺序是正确的。它必须在 VUE 2 + VUE Router 2 的某处更改。

Correct/expected 从 RouteA 到 RouteB 时挂钩 VUE 1 中的顺序：

RouteA beforeDestroy
已创建 RouteB

Incorrect/unexpected 从 RouteA 到 RouteB 时挂钩 VUE 2 中的顺序：

已创建 RouteB
RouteA beforeDestroy

解决方案是使用 "created" + "beforeRouteLeave" for VUE 2 + VUE Router 2。

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

Precedence in lifecycle hooks with Vue.js and Vue-router

vue.js

vue-router