vue路由中component的动态引入（import、require的各种写法）

在Vue路由中，可以使用动态导入（也称为代码分割）来异步加载组件。这通常通过使用webpack的动态import语法实现，Vue可以在路由配置中使用动态导入来实现按需加载。

以下是一些使用import、require和动态导入的例子：

1. 使用静态导入：

import MyComponent from '@/components/MyComponent.vue';
 
const routes = [
  { path: '/my-component', component: MyComponent }
];

2. 使用动态导入：

const routes = [
  { 
    path: '/my-component', 
    component: () => import('@/components/MyComponent.vue') 
  }
];

3. 使用require（不推荐，因为它不支持treeshaking）：

const routes = [
  {
    path: '/my-component',
    component: () => require(['@/components/MyComponent.vue'], resolve)
  }
];

4. 使用import()语法与动态导入结合（推荐）：

const routes = [
  {
    path: '/my-component',
    component: () => import('@/components/MyComponent.vue')
  }
];

5. 使用import()与webpack的magic comment结合，为组件命名（推荐）：

const routes = [
  {
    path: '/my-component',
    component: () => import(/* webpackChunkName: "my-component" */ '@/components/MyComponent.vue')
  }
];

在这些例子中，我们使用了箭头函数来定义路由的component属性，以便在每次访问路由时都可以异步加载组件。这有助于提高应用的初始加载速度，因为只有当用户实际访问到某个路由时，相应的组件才会被下载和渲染。