`
iaiai
  • 浏览: 2180366 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

vue import 传入变量

 
阅读更多
在做动态添加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就是变量值。

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

分享到:
评论

相关推荐

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

    webpack 编译es6 动态引入 import() 时不能传入变量,例如dir =’path/to/my/file.js’ ; import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。 但...

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

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

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

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

    vue项目引入高德地图

    - 这一步是为了告诉Webpack,我们已经在全局环境中定义了`AMap`变量,无需再通过npm包引入。 #### 四、创建Vue组件实现地图展示 1. **编写Vue组件** - 创建一个新的Vue组件文件,如`Map.vue`,并在其中定义模板、...

    VUE element-ui响应式步骤进度条样式代码

    import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用Steps组件:在你的Vue组件中,你可以这样创建一个基本的步骤条:...

    vue3父子组件传值.doc

    import { defineProps } from 'vue'; export default { setup(props, context) { const definedProps = defineProps({ message: String, // 字符串类型 count: { type: Number, // 数字类型 default: 0 // ...

    Vue props属性配置学习

    import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' } } } ``` 二、Props的数据类型检查 ...

    vue 翻页组件vue-flip-page效果

    import turn from "vue-flip-page"; components: { turn }, ``` 组件的使用通常涉及以下属性和数据: - **width**:定义组件的宽度,例如 `375` 表示375像素。 - **height**:定义组件的高度,例如 `667` 表示667...

    在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    本文将围绕在vue-cli3.0中如何使用预处理器(Sass、Less和Stylus)配置全局变量进行详细阐述。 首先,要理解什么是预处理器,它为何重要。预处理器是一种语言的编译器,它将源代码转化为另一种形式,通常是转换成另...

    vue中使用vue-pdf的方法详解

    1. 安装并引入`vue-pdf`库。 2. 在组件模板中使用`&lt;pdf&gt;`组件,并通过`v-for`循环显示所有页面。 3. 在数据对象中存储PDF文件的URL和总页数。 4. 在`mounted()`或`created()`钩子中加载PDF文件。 5. 实现切换PDF文件...

    vue获取时间戳转换为日期格式代码实例

    在这个例子中,`time`变量是时间戳,通过`| formatDate`管道操作符,我们可以将其转换为"yyyy-MM-dd hh:mm"格式的日期。 方法二:自定义Vue过滤器 如果不想使用黄轶老师的`formatDate`函数,也可以自定义一个过滤...

    vue-dplayer 视频播放器实例代码

    在脚本部分,我们首先通过import语句引入了vue-dplayer和它对应的样式文件。然后,在Vue组件中定义了name属性、props、data、methods以及components。在props中定义了source属性,这表示外部可以传入视频源地址。在...

    vue+iview+less 实现换肤功能

    在本文中,我们将探讨如何使用Vue.js、iView和Less实现一个动态换肤功能。Vue.js是一个流行的前端框架,iView是一个基于Vue的UI组件库,而Less是一种预处理器CSS语言,它允许我们编写更简洁、可维护的样式代码。以下...

    vue富文本编辑器组件vue-quill-edit使用教程

    Vue富文本编辑器组件vue-quill-edit使用教程详细介绍了如何在Vue项目中使用vue-quill-edit组件。vue-quill-edit是基于Quill编辑器构建的一个Vue组件,它允许开发者在Vue项目中使用Quill编辑器的富文本功能,为网页...

    在Vue-cli里应用Vuex的state和mutations方法

    在store.js中,首先需要引入并使用Vuex,然后定义state常量来存放变量,并定义mutations常量来存放改变state中变量的方法。在mutations中的方法能够接收两个参数,第一个是state,第二个是可选的载荷(payload)。 ...

    浅谈vue 锚点指令v-anchor的使用

    3. **页面中使用方式**:在Vue组件的模板中,使用`v-anchor`指令,并传入锚点ID的值,例如: ```html 前往锚点 ... 这里是锚点内容 ``` 总结起来,`v-anchor`指令提供了一种优雅的方式,使得用户在点击元素时...

    详解在vue-cli中使用graphql即vue-apollo的用法

    // 这里传入变量 }; }, }, }, }; ``` 最后,如果你有谷歌浏览器,可以安装"Apollo Client Developer Tools"扩展,以便在浏览器控制台中方便地调试你的GraphQL查询和突变。 通过以上步骤,你已经在Vue CLI项目...

    从0开始探究vue-组件化-组件之间传值

    5. **全局变量和方法**:在 `main.js` 中,我们可以通过 Vue 原型挂载全局变量和方法,但这可能导致全局污染,应谨慎使用。 ```javascript Vue.prototype.$globalData = {}; Vue.prototype.$sayName = function(e) ...

    Vuex 在Vue 组件中获得Vuex 状态state的方法

    在Vue.js应用中,Vuex是一个强大的状态管理库,它遵循单一状态树原则,将所有应用层级的状态集中管理,提供了一种有序、可预测的方式来处理组件间的共享状态。Vuex的状态存储是响应式的,这意味着当状态改变时,依赖...

Global site tag (gtag.js) - Google Analytics