vue-router如何实现路由懒加载

1.Vue异步组件(异步加载)

vue-router 配置路由,使用vue的异步组件技术,可以实现懒加载,但是这种情况是一个组件会生成一个js文件。

component:resolve => require([‘需要加载的组件地址’],resolve)


{path:'/login',name:'Login',
    component:resolve => require(['@/components/Login'],resolve)},
{path:'/home',name:'Home',
    component:resolve => require(['@/components/Home'],resolve),
    children:[
        {path:'/new',name:'New',
            component:resolve =>require(['@/components/New'],resolve)},
        {path:'/list',name:'List',
            component:resolve => require(['@/components/List'],resolve)}
    ]
 }

2.推荐方式-ES6的import()

const 组件名 = () => import(‘组件路径’)


//下面没有指定webpackChunkName,每个组件打包成一个js文件
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')

指定相同的webpackChunkName,会合并打包成一个js文件

const Foo = () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Foo');
const Aoo - () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Aoo')
...
{path:'/Foo',name:'Foo',component:Foo},
{path:'/Aoo',name:'Aoo',component:Aoo},
{path:'/Login',name:'Login',
    component: ()=>import(/*webpackChunkName:"ImportFuncDemo"*/,'../compontents/Login')}

上面代码中,webpackChunkName值相同的会打包成一个js文件

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论