您好,登录后才能下订单哦!
本篇文章为大家展示了vue-router实现懒加载的方法有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
未使用懒加载
import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@components/HelloWorld'; Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] })
vue异步组件
component:resolve=>{reuqire([‘需要加载的路由地址']),resolve)
import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve} Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] })
ES6的import()
import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld=()=>import('@/components/HelloWorld'); Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] })
webpack的require.ensure()
require.ensure可实现按需加载资源,包括js,css等。他会给里面require的文件单独打包,不会和主文件打包在一起。
第一个参数是数组,表明第二个参数里需要依赖的模块,这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的chunk的文件名
import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{ require.ensure(['@/components/HelloWorld'],()=>{ resolve(require('@/components/HelloWorld')) }) } Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] })
上述内容就是vue-router实现懒加载的方法有哪些,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。