vue-router里面实现component懒加载(按需加载)

  {

    path: '/login',

    component: () => import('@/views/login'),

    hidden: true

  },

在这个路由配置中，`component` 使用了一个函数来动态导入组件。这种方式被称为“懒加载”或“按需加载”，它的作用是在组件真正需要的时候才去加载，而不是在页面加载时就提前加载所有组件，从而减少初始加载时间和网络请求。

### 动态导入组件的优点：
- **减少初始加载时间**：只有在访问对应路由时才会加载相应的组件，减少了首次加载所需的时间。
- **按需加载**：提高了应用的性能，避免一次性加载过多的组件。
- **减少资源浪费**：仅加载当前页面所需的组件，减少不必要的资源浪费。

### 加载资源的方式：
当访问 `/login` 路径时，使用动态导入的方式加载组件时，组件的资源加载方式取决于您的构建配置和部署环境。

- **本地加载**：如果您的应用程序使用了打包工具（如Webpack、Vue CLI等），通常会将组件打包到单独的文件中。当访问 `/login` 路径时，对应的组件文件将会从打包后的文件中加载，这意味着文件实际上是从本地加载的。
  
- **服务器加载**：在生产环境下，这些打包后的文件会被部署到服务器上。当用户访问 `/login` 路径时，浏览器会向服务器请求这些文件，然后将其加载到用户的浏览器中。

### 总结：
- 当访问 `/login` 路径时，通过动态导入组件的方式加载组件，实际的资源加载方式取决于您的打包工具配置和部署环境。通常情况下，组件会从本地的打包文件中加载，或者在生产环境中从服务器加载。