vue import 传入变量

最新推荐文章于 2025-07-26 10:10:42 发布

转载最新推荐文章于 2025-07-26 10:10:42 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/uwith/blog/3039130

文章标签：

#javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

在做动态添加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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33948416

关注关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue生命周期及组件讲解（如何导入引用外部vue文件，以及注册全局变量，自定义标签效果）

2301_79810514的博客

06-13

1312

/* scoped是范围的意思，如果在父组件里添加，则父组件的样式会覆盖子组件的样式 */h1{color: red;

在Vue中，你可以使用动态import()语法来动态加载组件，动态变量路径

a378113472的博客

11-02

2555

在上面的示例中，当你点击"加载组件"按钮时，loadComponent方法会通过动态导入加载MyComponent.vue组件。导入成功后，将组件注册到Vue实例的dynamicComponent属性中，然后使用标签来渲染该组件。请注意，动态导入是一个返回Promise的函数，因此你可以使用.then()来处理导入成功的情况，并使用.catch()来处理导入失败的情况。在Vue中，你可以使用动态import()语法来动态加载组件。动态导入允许你在需要时异步加载组件，这样可以提高应用程序的初始加载性能。

参与评论您还未登录，请先登录后发表或查看评论

解决vue的router组件component在import时不能使用变量问题

10-15

主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue》》@ 用法

u013400314的博客

07-26

217

【代码】Vue》》@ 用法。

【Vue】全局变量的定义及使用

蓝胖子的博客

01-13

1万+

【Vue】全局变量的定义及使用

Vue引入外部js文件中的变量，方法

qq_37823919的博客

08-12

4966

Vue文件在src文件目录下，可以import…如果在静态文件夹static目录下，可以在主页面index.html引入。partten.js 文件用于存放需要的常量使用export const 进行声明。在main.js中引入。index.js文件。

在vue-cli 3中给stylus、sass样式传入共享的全局变量

10-16

本文将详细介绍如何在vue-cli 3环境下，为Stylus和Sass样式文件传入共享的全局变量。首先，vue-cli 3支持在`vue.config.js`文件中配置webpack，这为我们提供了灵活的选项来处理全局样式变量。`vue.config.js`位于...

vue-router 按需加载 component: () => import() 报错的解决

10-14

主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决vue动态路由异步加载import组件,加载不到module的问题

10-15

Vue使用webpack作为打包工具时，可以通过import()函数实现组件的异步加载。但是，在动态路由中使用import()函数加载模块时，可能会遇到“加载不到module”的问题，本文将针对此类问题展开讨论，并提供解决方案。 ##...

vue中import作用

在路上

08-28

3069

html文件中，通过script src = 'xxx'标签引入js文件。而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。 “xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。 “xxx路径”指的是文件的相对路径. 例如：在App.vue中导入index 和 content 分别可以写： import...

Vue中import用法

热门推荐

顺其自然~专栏

03-30

2万+

1. 引入第三方插件第三方常用插件参考Vue.js(九) 第三方常用插件_vbirdbest的博客-优快云博客_vue插件 2. 导入 css 文件 import 'iview/dist/styles/iview.css'; 如果是在.vue文件中导入，那么是在vue组件的style里面导入，且import前面需要加@符号 <style> 　　@import 'iview/dist/styles/iview.css'; </style> 3. 导入 js 文件

vue的router组件component在import时不能使用变量

牧竹子

08-29

2万+

webpack 编译es6 动态引入 import() 时不能传入变量，例如dir =’path/to/my/file.js’ ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path...

vue3 vite 动态路由（）=＞import() 不能使用变量有时候会有问题

callBack_____的博客

04-26

1573

vue3 vite 动态路由（）=>import() 不能使用变量有时候会有问题

vue 引入全局变量和全局函数

chpswg的专栏

07-05

6566

关于vue引入全局变量和全局函数 1、全局变量首先单独定义一个js文件，我一般放在asset文件中，注意结尾要用export写法在入口文件main.js（如果是多页面，就是用到该全局变量的入口文件）引入全局配置 import HyConfig from "./assets/js/MapConfig.js" //引入全局配置 Vue.prototype.HyConfig = H...

vue动态引入js，路径为变量

勋勋勋勋小勋勋的博客

03-11

2766

import(`@/${path}`) // path为变量 import(`@/${path}`).then(item=>{}); // item为引入js的export

vue3路由component 不能使用require并且import不能传变量问题

m0_46401243的博客

06-16

3640

vue3不能使用require方法，但是import()参数只能是字符串，不能传变量，

解决 VUE import不能使用动态变量问题

QQ_930289838

05-12

3812

component: () => import('@/views/xxxx/index') 改为记得不是单引号而是esc下面~的标识符· component: (resolve) => require([`@/views/${item.url}/index`], resolve),

vue3中import()中加变量