I'm experiencing an issue with Vue Router.
The scenario is to load / initially, retrieve data from there, and then navigate to the /chat/:chatId route to display the interface using the :chatId parameter obtained from an API.
The routes configured are / and ['chat', 'chat/:chatId'].
I have implemented an in-component guard for this specific situation.
beforeRouteEnter(to, from, next) {
store.dispatch('fetchOpenSessions')
.then(() => {
const firstChat = Object.keys(store.state.chatsidebar.openSessions)[0];
next({ name: 'chat', params: { chatId: firstChat } });
});
},
Unfortunately, this code results in an infinite loop, causing the browser to freeze.
My query is, how can I set chat/:chatId when my initial route is either / or /chat without triggering an infinite loop?