vue路由懒加载如何实现

这篇文章主要讲解了“vue路由懒加载如何实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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)
}

感谢各位的阅读，以上就是“vue路由懒加载如何实现”的内容了，经过本文的学习后，相信大家对vue路由懒加载如何实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！