vue懒加载 路由 router 的编写(resolve)

若是用import引入的话,当项目打包时路由里的全部component都会打包在一个js中,形成进入首页时,须要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不一样的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你能够打包的时候看看目录结构就明白了。 
html

 

正文

  我先用控制台建立了vue项目demo(如何建立能够参考我以前的写的笔记  http://www.cnblogs.com/atjinna/p/6723293.html)。因为单页面开发,会出现打包后的JavaScript包很是大,这会影响页面加载速度,那咱们能够考虑使用懒加载去优化这个问题,所以vue

resolve出现了。具体参考下面: webpack

 一、引入 vue-router(因为使用的是控制台建立的项目,而且使用了webpack这个模板,因此能够省略这一步)  

  

  二、定义 component 指定变量   

     1)、先看下目录    

    2)、component 指定变量  

 
 

三、path路径注意点:  

参数名、页面路径、以及懒加载web

 

 

补充

  我将整个router展现给你们看吧,这个实际上是我上面提到的demo那个项目的代码vue-router

 

还在研究中,因此写得很青涩,也没有解释为什么如此用,你们能够参考下文档吧 https://router.vuejs.org/zh-cn/api/options.html#routes 以及另外一份文档 https://cn.vuejs.org/v2/guide/  。哦,对了,我用的都是vue2,也建议你们使用vue2.  api

相关文章
相关标签/搜索