vue中router的懒加载

       在使用vue-cli3中的手动创建项目，选择router，那么在项目初始化创建的时候就会将router自动安装到项目中，其中在router目录下的index.js里就配置好了router的相关内容。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Button from "../views/Button";

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
    {
      path: '/button',
      component: Button
    }
]

       大家可以看到路由中所访问的组件一开始都在开头进行导入，之后再在router中进行注册，即使你未访问某一个路由组件，它也是被加载了的。
       这里官方提供了路由懒加载的默认示例——about，在每一个子路由中除了path、name属性外还有一个component。这里使用箭头函数导入了组件。并在上面用英文注释：

路由级代码拆分
这会为此路由生成一个单独的块(about.[hash].js) ,并当访问该路由时会进行懒加载

       这就是vue中router的懒加载，经测试访问此路由时速度确实会慢一些