vue cli3 路由懒加载lazy-load

首先安装vue-router:

npm i vue-router -S

在router文件夹下有个index.js文件，这是路由配置文件

先引用：

import Vue from 'vue'

import VueRouter from 'vue-router'

安装路由插件

Vue.use(VueRouter)

创建router实例对象

const router = new VueRouter({

    routes,  // 这是路由配置信息，可将其抽离出去，也可以在实例对象中写

    mode: 'history'

})

路由挂载

new Vue({

  router, // 挂载

  render: h => h(App)

}).$mount('#app')

路由信息配置与懒加载

// 第一种方式：

const Home = () => import( /* webpackChunkName: "home" */   'views/home/Home')

const routes = [{

    path: '/',

    name: 'Home',

    component: Home

  },

// 第二种方式：

  {

    path: '/about',

    name: 'About',

    component: () => import( /* webpackChunkName: "about" */  '/views/About.vue')

  }

]