与路由器结合时的 VueJS 生命周期顺序

Question

我需要在我的应用程序启动时运行一个异步初始化方法。所以我在 App.vue 的 beforeCreate 里面做了，如下所示。

app.vue:

export default {
  ...
  beforeCreate () {
    console.log('before create app.vue')
  }
}

此外，我需要在进入任何路线之前检查条件，所以我在 router 的 beforeEach 内进行了。

main.js:

router.beforeEach((to, from, next) => {
  if (condition) {
    console.log('router before each')
  }
})

问题是我需要在初始化完成后检查条件，但是，当我启动我的应用程序时，在初始化之前检查了条件，我的输出是：

router before each

before create app.vue

我错过了什么？我该如何解决这个问题？

Answer 1

是的，它应该是这样的，只要有导航，导航守卫就会始终被触发，这意味着一旦它收到你的导航，它就会被执行，这是在你的组件被创建之前。你可以在你的 main.js 文件中执行任何东西我不完全明白你想要实现什么但是你可以利用任何 Vue Js 生命周期钩子（https://vuejs.org/v2/guide/instance.html) to get what you want or the navigation guards(https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards）beforeRouteEnter，beforeRouteLeave 和 beforeRouteUpdate

它们都在不同的时间执行，希望对您有所帮助

Answer 2

这是我在 vue3 中解决它的方法，但您可以使用类似的方法...基本上在初始化完成之前不要挂载应用程序。在我的例子中，你提到的初始化函数中的 authCheck full source

import useFirebaseAuth from "./hooks/firebase-auth";

const { authCheck  } = useFirebaseAuth();

const app = createApp(App).use(IonicVue);

authCheck()
  .then(() => {
    app.use(router);
    return router.isReady();
  })
  .then(() => {
    app.mount("#app");
  });

与路由器结合时的 VueJS 生命周期顺序

VueJS lifecycle order when combined with router

javascript

lifecycle

vue.js

vue-router

vuejs2