vue router 懒加载,vuerouter懒加载怎么实现

　　本文主要介绍了vue-router的三种惰性加载方式，并通过示例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。让我们和边肖一起学习。

　　未使用懒加载

　　从“Vue”导入Vue；

　　从“vue-router”导入路由器；

　　从“@components/HelloWorld”导入hello world；

　　Vue.use(路由器)；

　　导出默认新路由器({

　　路线：[

　　{路径：。/,

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}

　　]

　　})

　　vue异步组件

　　Component: resolve={reuqire ([要加载的路由地址])，resolve)

　　从“Vue”导入Vue；

　　从“vue-router”导入路由器；

　　const hello world=resolve={ require([ @/components/hello world ]，resolve}

　　Vue.use(路由器)；

　　导出默认新路由器({

　　路线：[

　　{路径：。/,

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}

　　]

　　})

　　ES6的import()

　　从“Vue”导入Vue；

　　从“vue-router”导入路由器；

　　import hello world=()=import( @/components/hello world )；

　　Vue.use(路由器)

　　导出默认新路由器({

　　路线：[{

　　{路径：。/,

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}

　　}]

　　})

　　webpack的require.ensure()

　　Require.ensure可以按需加载资源，包括js、css等。他将把需要的文件单独打包，而不是和主文件一起打包。

　　第一个参数是一个数组，表示第二个参数中的依赖模块，会提前加载。

　　第二个是回调函数。在这个回调函数中，require文件将被单独打包成一个块，而不会和主文件打包在一起。因此，生成了两个块，第一次只加载主文件。

　　第三个参数是错误回调。

　　第四个参数是单独打包的块的文件名。

　　从“Vue”导入Vue；

　　从“vue-router”导入路由器；

　　const HelloWorld=resolve={

　　require . assure([ @/components/hello world ]，()={

　　resolve(要求( @/components/HelloWorld ))

　　})

　　}

　　Vue.use(路由器)

　　导出默认新路由器({

　　路线：[{

　　{路径：。/,

　　名称：“HelloWorld”，

　　组件：HelloWorld

　　}

　　}]

　　})

　　总结

　　关于vue-router三种懒加载方式的这篇文章到此为止。关于vue-router的延迟加载的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。