vue中路由有哪些懒加载方式

lewis 6年前 (2019-04-13) 阅读数 17 #程序编程

文章标签 vue 路由懒加载

在vue中实现路由懒加载的方法有：1.通过异步组件懒加载；2.使用import方法懒加载；3.使用require.ensure()函数懒加载；

在vue中实现路由懒加载的方法有以下几种

1.通过异步组件实现实现路由懒加载

{path:'/home',
name:'home',
component:resolve=>require(['@/components/home'],resolve)
},{
path:'/index',
name:'Index',
component:resolve=>require(['@/components/index'],resolve)
},{
path:'/about',
name:'about',
component:resolve=>require(['@/components/about'],resolve)
}

2.使用import方法实现路由懒加载

constHome=()=>import(/*webpackChunkName:'ImportFuncDemo'*/'@/components/home')constIndex=()=>import(/*webpackChunkName:'ImportFuncDemo'*/'@/components/index')
constAbout=()=>import(/*webpackChunkName:'ImportFuncDemo'*/'@/components/about')

3.使用webpack中的require.ensure()函数实现路由懒加载

{path:'/home',
name:'home',
component:r=>require.ensure([],()=>r(require('@/components/home')),'demo')
},{
path:'/index',
name:'Index',
component:r=>require.ensure([],()=>r(require('@/components/index')),'demo')
},{
path:'/about',
name:'about',
component:r=>require.ensure([],()=>r(require('@/components/about')),'demo-01')
}