Vuejs路由器异步组件

Question

我正在运行一个带有npm run serve的vue应用程序。我异步地将组件注入到路由中，在我看来，发生了一些奇怪的事情，因为当我甚至不在该路径上时，它会向我显示关于另一个路径的组件的错误，说文件丢失了……它确实失踪了..。但是，当我在那个路径上时，它不是应该被注入吗？看起来该组件已导入...

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

我在编译器中看到了这个错误

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

路径是/login，当然，当我创建寄存器页时，一切都正常工作……我只是不明白为什么在路由还没有加载的时候就导入了它。

Answer 1

你是正确的。

在导航到具有错误导入路径的路由之前，您不会得到该错误。

但是，您已经为登录和注册指定了/login。

因此，如果注册组件导入路径不正确，您将得到错误。

下面是一个简单的实现，它演示了这一点。

当您导航到类别时，您将看到一个错误。但是主页、新闻和列表可以正常工作。

​

​