都0202了，还不会路由懒加载？

什么是路由？
 官方的说：它代表一个url与相应处理程序的影射关系，用户在输入要访问的url之后，路由会解析url中的路径，之后根据映射表中的映射关系查找相应的预设函数，并将结果返回给用户，以此完成一次操作。
 直白的说：就是用于控制页面跳转的url（文件中一般都是相对路径）,如下：
 vue-cli搭建的项目默认首页地址：http://localhost:8080
 我们可以通过/后面输入不同的路径，以此来显示不同的网页内容，如：http://localhost:8080/#/Page2

什么是路由懒加载？
 路由懒加载简单来说就是需要使用哪个路由中的组件内容时，再去加载那个路由里面的内容

为什么要使用路由懒加载技术？
 随着项目的壮大，路由的使用也会越发频繁，不同的路由往往搭载着不同的组件以及数据，一旦不使用路由懒加载技术，那么就会使得首屏加载时间过长（初次加载将加载所有的js文件），导致用户体验下降。
直接体现
 当使用非路由懒加载时，在项目启动后，会直接一次性将js文件全部下载下来，当点击组件2时，不会加载组件2所需的js文件
 当使用路由懒加载时，在项目启动后，只会加载当前页所需的js文件，当点击组件2时，才会加载组建2所需的js,从而实现懒加载，加快首屏响应时间，且会随着js内容越大越多这个效果将更加明显
话不多说，直接上干货：
直接用vue-cli脚手架搭建vue项目，初始化的项目内容如下（核心部分）：

如果仍然有小伙伴对index.html、main.js
、APP.vue、index.js是什么以及它们在整个项目中的作用是什么仍然存在疑惑，请看我的上一篇文章

其中，index.html、main.js与vue-cli搭建出的初始文件一致，这里只给出了改变文件的内容如下：
index.js(非路由懒加载)

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Page1',
      component: Page1
    },{
      path: '/Page2',
      name: 'Page2',   
      component: Page2
    }
  ]
})

index.js(路由懒加载)

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/Page1'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Page1',
      component: Page1
    },{
      path: '/Page2',
      name: 'Page2',
      component: () =>
         import ( /*webpackChunkName:"Page2"*/ '@/components/Page2.vue')
    }
  ]
})

App.vue

<template>
  <div id="app">
    <h1>前端非路由懒加载（根据是否为懒加载进行输入）<h1>
    <div>
      <router-link to="/">组件1</router-link> |
      <router-link to="/Page2">组件2</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Page1.vue

<template>
  <div class="Page1">
      <h1>组件1专属内容</h1>
  </div>
</template>

Page2.vue

<template>
    <div class="Page2">
        <h1>组件2专属内容</h1>
    </div>
</template>

总结：路由懒加载体现在页面触发某个事件，从而导致路由改变，进而动态添加(import)相应组件的js文件；非路由懒加载的方式体现在最开始就直接将组件一股脑儿的全部导入(import)。