vue-router实现懒加载的方法有哪些-创新互联
本篇文章为大家展示了vue-router实现懒加载的方法有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联成立与2013年,先为湘潭县等服务建站,湘潭县等地企业,进行企业商务咨询服务。为湘潭县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。未使用懒加载
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实现懒加载的方法有哪些,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前文章:vue-router实现懒加载的方法有哪些-创新互联
网页URL:http://scyanting.com/article/cdihos.html