vue怎么实现路由懒加载

vue怎样实现路由懒加载

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

具体方法以下：

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

const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home.vue')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index.vue')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about.vue')
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/index', component: Index },
{ path: '/about', component: About }
]
})

2.使用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')
}

3.使用vue异步组件实现路由懒加载

{
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)
}