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

最新推荐文章于 2024-08-20 16:40:18 发布

YouZi_X

最新推荐文章于 2024-08-20 16:40:18 发布

阅读量525

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/YouZi_X/article/details/107969009

版权

vue 专栏收录该内容

9 篇文章 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)
  }
}