在做动态添加component的时候,传入变量就会报错,出现以下错误信息:

vue-router.esm.js?fe87:1921 Error: Cannot find module '@/components/index'.
    at eval (eval at ./src/components lazy recursive (2.js:249), <anonymous>:5:9)

百度了下component是不允许传入变量的,但是程序员无所不能,就搞出下面这种写法来实现,注意不是单引号,是英文输入法下的~按键。然后${com},其中com就是变量值。

注意:在import的时候,一定不能全部使用变量,的有一部分路径信息才行,我这里是@/components目录,如果只写变量是读取不到模块的。这样在编译的时候,会编译@/components目录下的所有模块,但是运行时才会确定变量的值,这样来实现懒加载。

component: () => import(`@/components/${com}`)

转载于:https://my.oschina.net/uwith/blog/3039130

Logo

前往低代码交流专区

更多推荐