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路由懶加載如何實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！