Estoy aprendiendo Vue3 y tratando de hacer algunas rutas, pero recibo un mensaje de error que no tiene sentido. Tal vez esté relacionado con algún tipo de "enrutamiento anidado", pero también traté de hacer "hijos" y no quería funcionar.
Esto funciona:
import { createRouter, createWebHistory } from 'vue-router'; import HomePage from '../home/HomePage.vue'; import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue'; import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue'; export default createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: HomePage, }, { path: '/FetchAccount', name: 'FetchAccount', component: FetchAccount, }, { path: '/CreateADAccount', name: 'CreateADAccount', component: CreateADAccount, }, ], });Y esto no:
import { createRouter, createWebHistory } from 'vue-router'; import HomePage from '../home/HomePage.vue'; import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue'; import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue'; export default createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: HomePage, }, { path: '/NonPrimaryADAccount/FetchAccount', name: 'FetchAccount', component: FetchAccount, }, { path: '/NonPrimaryADAccount/CreateADAccount', name: 'CreateADAccount', component: CreateADAccount, }, ], });Mensaje de error:
4:29 error Unable to resolve path to module '../nonPrimaryADAccounts/CreateADAccount.vue' import/no-unresolvedSi necesita una ruta anidada, el enfoque recomendado es usar una función para generar las rutas con el prefijo:
const withPrefix = (prefix, routes) => routes.map( (route) => { route.path = prefix + route.path; return route; }); export default createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: HomePage, }, ...withPrefix('/NonPrimaryADAccount',[ { path: '/FetchData', name: 'FetchData', component: FetchData, }, { path: '/CreateADAccount', name: 'CreateADAccount', component: CreateADAccount, }, ]), ]