在Vue中实现路由懒加载的方法有:1.使用import方法实现;2.使用require.ensure()方法实现;3.使用vue异步组件实现;具体方法如下:使用import方法实现路由懒加载const Home = () => import
在Vue中实现路由懒加载的方法有:1.使用import方法实现;2.使用require.ensure()方法实现;3.使用vue异步组件实现;
具体方法如下:
使用import方法实现路由懒加载
const Home = () => import( '@/components/home.vue')
const Index = () => import( '@/components/index.vue')
const About = () => import( '@/components/about.vue')
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/index', component: Index },
{ path: '/about', component: About }
]
})
使用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')
}
使用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)
}
--结束END--
本文标题: vue如何实现路由懒加载
本文链接: https://www.lsjlt.com/news/110550.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-02
2024-05-02
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0