Mi enrutador Vue normalmente funciona bien, pero cuando estoy en ciertas rutas y quiero navegar a una de las rutas principales, me lleva de vuelta a la ruta redirigida raíz en lugar de a la ruta secundaria a la que quiero que vaya.
Por ejemplo, la ruta en cuestión es account-creation . Cuando navego allí con $router.push('/account-creation') desde la mayoría de las rutas, funciona bien. Sin embargo, si navego allí desde cualquiera de las rutas secundarias de los detalles de la cuenta (como overview ), me lleva a /cuenta y no a /creación de cuenta.
const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('MainLayout.vue'), children: [ { path: '/', redirect: '/account' }, { path: 'account', component: () => import('AccountList.vue') }, { path: 'account-creation', component: () => import('AccountCreation.vue') }, { path: 'account/:accountId', component: () => import('AccountDetailsLayout.vue'), children: [ { path: 'overview', component: () => import('AccountOverview.vue') }, { path: 'settings', component: () => import('AccountSettings.vue') }, ], } ] } ];He intentado todas las formas de solución que pude encontrar en línea, incluido el uso de rutas totalmente calificadas, reordenar rutas, usar rutas de nombres, todo fue en vano.
Estoy bastante seguro de que está relacionado con la redirección a/cuenta en la raíz/ruta, pero no sé cómo mantener esa funcionalidad y corregir el comportamiento.
¿Cómo puedo asegurarme de que navegar a creación de cuenta desde cuenta/{id}/resumen navega correctamente a creación de cuenta, en lugar de la ruta de redirección en /cuenta?
Cosas que he intentado
Si está pasando la identificación a la ruta correctamente, entonces el problema sería que debe tener una etiqueta de vista de enrutador secundaria en su AccountDetailsLayout.vue para mostrar esta ruta con url account/{id}/overview . Dado que este es el nieto del diseño principal, simplemente coloque la etiqueta de vista del enrutador en su archivo de esta manera.
AccountDetailsLayout.vue ----------------------- <template> ------ <router-view></router-view> ----- </template> <script> export default { name: "AccountDetailsLayout", components: {}, store, data() { return {}; }, computed: {}, mounted() {}, methods: {} }; </script> <style scoped></style>Parece que hay conflictos en sus rutas raíz (todas las rutas con "/" al frente). Puede consultar la documentación de vue-router para rutas anidadas Rutas anidadas de Vue
const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('AccountList.vue'), alias: '/account' }, { path: '/account-creation', component: () => import('AccountCreation.vue') }, { path: '/account/:accountId', component: () => import('AccountDetailsLayout.vue'), children: [ { path: 'overview', component: () => import('AccountOverview.vue') }, { path: 'settings', component: () => import('AccountSettings.vue') } } ] Algo como esto podría funcionar, pero como señaló, la redirección en "/" es un olor a código ya que carga diferentes componentes.
El componente MainLayout nunca se montará con este código, sino que será redirigido a AccountList.
EDITAR
Edité la respuesta original según el comentario de Excalibaard. Probablemente debería agregar <router-view> en su MainLayout.vue
PS /account debe ser accounts , ya que representa una lista