динамическая загрузка маршрутов в vuejs не работает

Question

Я работаю над проектом, я хочу динамически загружать свои маршруты только тогда, когда это необходимо, вместо загрузки всех компонентов при загрузке страницы, в route.js вот мой код

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
function loadView(view){
    return () => import(/* webpackChunkName: "view[request]" */`@/components/${view}.vue`)
}
const router = new Router({
  routes: [
    {path: '/', name: 'home', component: loadView('Notlogin/HelloWorld')}, 
    { path: '/add', name: 'add', component: loadView('login/add'), meta:{requireAuth:true}},
    { path: '/add/:id', name: 'addParams', component: loadView('login/add'), alias: '/add', meta:{requireAuth:true}},
    { path: '/dashboard', name: 'dashboard', component: loadView('login/dashboard'), meta:{requireAuth:true}},
    { path: '/profile', name: 'profile', component: loadView('login/profile/index'), meta:{requireAuth:true}},
    { path: '/projectDetails/:id', name: 'projectDetails', component: loadView('login/projectDetails'), meta:{requireAuth:true}},
    { path: '/Projects', name: 'Projects', component: loadView('login/urProjects'), meta:{requireAuth:true}},
    { path: '/projectCat/:id', name: 'projectCat', component: loadView('login/projectCat'), meta:{requireAuth:true}},
    { path: '/Finance', name: 'Finance', component: loadView('login/Finance'), meta:{requireAuth:true}},
    { path: '/login',name: 'login', component: loadView('Notlogin/login')},
    { path: '/forgot',name: 'forgot', component: loadView('Notlogin/forgot')},
    { path: '/register', name: 'register', component: loadView('Notlogin/register')},
    { path: '/test', name: 'test', component:  loadView('test')},
    { path: '/404', name: '404', component: loadView('Notlogin/404') }, 
    { path: '*', redirect: error404} 
  ]
})
export default router

проблемаэто то, что я получаю эту ошибку в консоли

warning  in ./src/components/login/profile/Profile.vue

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other c
ase-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\De Stone of David\Desktop\node projects\vuejs\myapp\client\node_modul
es\vue-loader\index.js??ref--0!C:\Users\De Stone of David\Desktop\node projects\
vuejs\myapp\client\src\components\login\profile\Profile.vue
    Used by 1 module(s), i. e.
    C:\Users\De Stone of David\Desktop\node projects\vuejs\myapp\client\node_mod
ules\babel-loader\lib\index.js!C:\Users\De Stone of David\Desktop\node projects\
vuejs\myapp\client\node_modules\vue-loader\lib\selector.js?type=script&index=0!C
:\Users\De Stone of David\Desktop\node projects\vuejs\myapp\client\src\component
s\login\profile\profileDeftails.vue
* C:\Users\De Stone of David\Desktop\node projects\vuejs\myapp\client\node_modul
es\vue-loader\index.js??ref--0!C:\Users\De Stone of David\Desktop\node projects\
vuejs\myapp\client\src\components\login\profile\profile.vue
    Used by 1 module(s), i. e.
    C:\Users\De Stone of David\Desktop\node projects\vuejs\myapp\client\src\comp
onents lazy /^\.\/.*\.vue$/

пожалуйста, что я делаю не так или как я могу решить эту проблему, спасибо