I cannot have similar router paths in Vue3

user_14448739 0
Viewed 226

I'm just learning Vue3 and trying to do some routing, but I'm getting an error message that makes no sense. Maybe it's related to some kind of nested routing, but I also tried to do children and it didn't want to work.

This works:

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,
    },
  ],
});

And this does not:

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,
    },
  ],
});

Error message:

4:29  error  Unable to resolve path to module '../nonPrimaryADAccounts/CreateADAccount.vue'  import/no-unresolved
vue-router vuejs3 vue.js javascript
1 Answers

If you need nested path the recommended approach is to use a function to generate the routes with the prefix:

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,
        },
    ]),
]
user_119891890
Related