En Vue Router, quiero mostrar diferentes componentes en la misma ruta, según una variable.
Si isFirstTimeAccess es verdadero, quiero mostrar el componente de bienvenida, si es falso, quiero mostrar el componente AuthHandler en la misma ruta en el navegador -> /my-sub-url/
Ejemplo:
export const router = createRouter({ history: createWebHistory(), routes: [{ path: '/my-sub-url/', component: welcome, beforeEnter(to, from, next) { if (store.getters.isFirstTimeAccess) { next(); } else { next({ name: 'auth' }); } }, children: [{ name: 'auth', path: '', component: AuthHandler, }, ] } ]; });pero si probé este código si configuré:
isFirstTimeAccess === verdadero -> funciona y muestra el componente de bienvenida
isFirstTimeAccess === falso -> me muestra este error en el navegador:
[Advertencia de Vue Router]: se detectó una redirección infinita en un protector de navegación al pasar de "/" a "/mi-sub-url/". Abortar para evitar un desbordamiento de pila. Esto interrumpirá la producción si no se soluciona. vue-router.esm-bundler.js:72
[Advertencia de Vue Router]: error inesperado al iniciar el enrutador: Error: redirección infinita en la protección de navegación
¿Puede alguien ayudarme por favor?
Prueba de esta manera
<template> <component :is="checkComponentAccess"></component> </template> <script> export default { components: { WelcomeComponent: () => import("/path/to/component/WelcomeComponent"), SecondTimeComponent: () => import("/path/to/component/SecondTimeComponent") }, computed: { ...mapGetters("user", ["isFirstTimeAccess"]), checkComponentAccess() { return this.isFirstTimeAccess === "citizen" ? "FirstComponent" : "SecondComponent"; } } }; </script>Este parece ser un caso perfecto para los protectores de navegación de Vue Router. Incluso tienen un ejemplo específico para un caso de autenticación como el tuyo.
Acabo de copiar de allí:
router.beforeEach(async (to, from) => { if ( // make sure the user is authenticated !isAuthenticated && // ❗️ Avoid an infinite redirect to.name !== 'Login' ) { // redirect the user to the login page return { name: 'Login' } } })