第6天Vue动态加载组件的两类方式

94 阅读1分钟

Vue加载组件主要有正常加载懒加载,示例代码如下:

//正常加载
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')

组件懒加载指的是在组件需要使用的时候才加载 Vue动态加载组件主要有两类方式,即import方式和require方式