Vue加载（动态）组件的方式

- 日理万妓 2022-11-27 00:57 146阅读 0赞

//正常加载
    import index from '../pages/index.vue'
    import view from '../pages/view.vue'
    //懒加载
    const index = resolve => require(['../pages/index.vue'], resolve)
    const view = resolve => require(['../pages/view.vue'], resolve)
    //懒加载 - 按组
    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
    const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
    // 懒加载 - 按组 import，基于ES6 import的特性
    const index = () => import('../pages/index.vue')
    const view = () => import('../pages/view.vue')

## 动态加载 ##

**1.import导入组件**

var name = 'componentName';
    var myComponent =() => import('../components/' + name + '.vue');
    var route={
      name:name,
      component:myComponent
    }
    
    //直接赋值
    var name = 'componentName';
    var route={
      name:name,
      component :() => import('../components/' + name + '.vue');
    }

**2.require 导入组件**

var name = 'componentName';
    var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
    var route={
      name:name,
      component:myComponent
    }
    
    //直接赋值
    
    var name = 'componentName';
    var route={
      name:name,
      component(resolve) {
        require(['../components/' + name + '.vue'], resolve)
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue加载天气组件

天气插件 [中国天气网][Link 1] vue中使用首先我们进入中国天气网生成一段代码根据需要设置天气样式 ![在这里插入图片描述][waterma

Myth丶恋晨/ 2023年02月23日 12:28/ 0 赞/ 6 阅读

相关 Vue加载（动态）组件的方式

//正常加载 import index from '../pages/index.vue' import view from '../pages/vie

- 日理万妓/ 2022年11月27日 00:57/ 0 赞/ 147 阅读

相关 vue 数据加载完成后加载组件

html源码： <template> //:is里面装的是组件名称 :child="child"是指子组件需要的数据 <component :is="isComp

朱雀/ 2022年10月05日 05:45/ 0 赞/ 275 阅读

相关 html vue 动态加载组件

html vue 动态加载组件 1、html: <components :is="Comtab" ref="Comtabref"> </compo

怼烎@/ 2022年09月04日 11:43/ 0 赞/ 177 阅读

相关 Angular动态加载组件

引言有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组

绝地灬酷狼/ 2022年02月23日 02:42/ 0 赞/ 532 阅读

相关 VUE之组件的动态注册和动态加载

目录问题描述项目中的应用使用总结 -------------------- 问题描述实际项目中，针对不同的数据开发了不同的数据展示视图组件，例如：拓扑图

深碍√TFBOYSˉ_/ 2022年02月01日 08:39/ 0 赞/ 901 阅读

相关 cakephp动态加载组件

跳转回之前页面，并携带提示消息。控制器页面：需要加载Session compent，动态加载组建： $this->Session= $this->Comp

水深无声/ 2022年01月10日 02:17/ 0 赞/ 249 阅读

相关 vue按需加载组件,异步组件

说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了学不完啊...没关系,看我的按需加载组件,或者异步组件,主要是应用了component的

叁歲伎倆/ 2021年11月16日 11:18/ 0 赞/ 466 阅读

相关 vue 循环加载动态组件以及传值

　　今天遇到一个需求，某个页面是个动态页面，由多个子组件构成。　　之前我们的做法是将N个需要的组件import进主页面，然后引用一下即可。但是现在遇到的问题是，这个动态页

怼烎@/ 2021年11月01日 20:08/ 0 赞/ 510 阅读

相关 Vue 动态加载 Vuex

Vue 动态加载 Vuex Vuex 是用来处理状态管理的高性能解决方案。它使管理大型 Vue.js 变得更轻松，并通过暴露出来的 store 使得状态变得可预测。你可...

朱雀/ 2020年06月21日 15:14/ 0 赞/ 779 阅读