Btukfyl

Am working on a project, i want to dynamically load my routes only when its needed instead of loading all the components when the page loads, in route.js here is my code

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

the problem is that i keep getting this error in the console

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:UsersDe Stone of DavidDesktopnode projectsvuejsmyappclientnode_modul

esvue-loaderindex.js??ref--0!C:UsersDe Stone of DavidDesktopnode projects

vuejsmyappclientsrccomponentsloginprofileProfile.vue

    Used by 1 module(s), i. e.

    C:UsersDe Stone of DavidDesktopnode projectsvuejsmyappclientnode_mod

ulesbabel-loaderlibindex.js!C:UsersDe Stone of DavidDesktopnode projects

vuejsmyappclientnode_modulesvue-loaderlibselector.js?type=script&index=0!C

:UsersDe Stone of DavidDesktopnode projectsvuejsmyappclientsrccomponent

sloginprofileprofileDeftails.vue

* C:UsersDe Stone of DavidDesktopnode projectsvuejsmyappclientnode_modul

esvue-loaderindex.js??ref--0!C:UsersDe Stone of DavidDesktopnode projects

vuejsmyappclientsrccomponentsloginprofileprofile.vue

    Used by 1 module(s), i. e.

    C:UsersDe Stone of DavidDesktopnode projectsvuejsmyappclientsrccomp

onents lazy /^./.*.vue$/

pls what am i doing wrong or how can i solve this problem thanks