Vue动态加载组件（变量形式）报错，字符串形式就可以, 不知道是什么原因？

Question

直接用字符串就加载OK

 route.component = () => import('@/views/Home.vue');

用参数就报错

console.log(`@/views/${route.component}`);//@/views/Home.vue
route.component = () => import(`@/views/${route.component}`);
// or
console.log(route.component);//@/views/Home.vue
route.component = () => import(route.component);

Answer 1

import语法模块只能做静态加载

如果有多种情况下的话可以配置成对象，然后根据对象的key获取到组件进行加载，例如：

// 配置组件对象
export const COMPONENTS = {
  info: Info,
  ...
};

// 通过key获取组件
export function getComponent(name, COMPONENTS) {
  return (
    // eslint-disable-next-line
    COMPONENTS[name] ||
    function() {
      return <div />;
    }
  );
}

// 使用
const Component = getComponent(route.component, COMPONENTS);

<Component />

Answer 2

import()返回的是一个promise

Answer 3

import是webpack提供的异步加载函数
只能在打包阶段解析并分包