Vuejs Router Async Component

Question

I am running a vue app with npm run serve. I am injecting the components to the routes asynchronously and in my opinion is happening something strange as when I am not even at that path it shows me an error about a component of another path, saying that the file is missing... and it is true it is missing... but isn't that suppose to be injected when I am at that path? Looks like the component is already imported...

 const router = new VueRouter({
    routes: [ 
       { path: '/login', component: () => import('./pages/login.vue') },
       { path: '/register', component: () => import('./pages/register.vue') },
    ]

I see this error in the compiler

./src/main.js
Module not found: Error: Can't resolve './pages/register.vue' in '/home/daniel/work/someapp/frontend/src' 

and the path is /login, of course all works properly when I create the register page... just don't understand why it gets imported when the route is not loaded yet.

Answer 1

You are right.

You won't get the error until you navigate to that route that has the erroneous import path.

However, you have specified /login for both login and register.

So if the register component import path is not correct you will get the error.

Here is a trivial implementation which demonstrates the same.

When you navigate to categories, you will see an error. But home, news and lists will work correctly.