Порядок жизненного цикла VueJS в сочетании с маршрутизатором
Мне нужно запустить асинхронный метод инициализации при запуске моего приложения. поэтому я сделал это внутри beforeCreate из App.vue, как показано ниже.
app.vue:
export default {
...
beforeCreate () {
console.info('before create app.vue')
}
}
Кроме того, мне нужно проверить условие перед входом в любой маршрут, поэтому я сделал это внутри beforeEach из router.
main.js:
router.beforeEach((to, from, next) => {
if (condition) {
console.info('router before each')
}
})
Проблема в том, что мне нужно проверить условие после завершения инициализации, но когда я запускаю свое приложение, условие проверяется до инициализации, и мой вывод:
маршрутизатор перед каждым
перед созданием app.vue
Что мне не хватает? и как я могу это исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Да, именно так и должно быть, защита навигации всегда срабатывает всякий раз, когда есть навигация, то есть она выполняется, как только получает вашу навигацию, то есть до создания вашего компонента. Вы можете выполнить что угодно в файле main.js. Я не совсем понимаю, чего вы хотите достичь, но вы можете использовать любой из хуков жизненного цикла Vue Js (https://v2.vuejs.org/v2/guide/instance .html ), чтобы получить то, что вы хотите, или навигационные охранники ( https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards) beforeRouteEnter, beforeRouteLeave и beforeRouteUpdate
Все они выполняются в разное время, надеюсь, это поможет
вот как я решил это в vue3, но вы можете использовать аналогичный подход... в основном не монтируйте приложение, пока не будет завершена инициализация. В моем случае authCheck в функции инициализации вы упоминаете полный исходный код
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");
});
Я переработал свой поток приложений, и это решило проблему. но я тоже проверил ваш ответ, и он сработал нормально. Однако мне понравилась идея, и я думаю, что это (единственное) решение моего вопроса, поэтому я проверяю его как принятый ответ. спасибо кстати
Не видя полного кода, я бы предположил, что навигация запускается до того, как
app.vueотрисовывается, и, поскольку это порядок, в котором она должна происходить, нет никакого способа обойти это.