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 nested routing , pero también traté de hacer children 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, }, ]), ]