vue cli3 routing lazy loading lazy-load

First install vue-router:

npm i vue-router -S

There is an index.js file in the router folder, which is the routing configuration file

Quote:

import Vue from 'vue'

import VueRouter from 'vue-router'

Install routing plugin

Vue.use(VueRouter)

Create router instance object

const router = new VueRouter({

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

    mode: 'history'

})

Route mount

new Vue({

  router, // 挂载

  render: h => h(App)

}).$mount('#app')

Routing information configuration and lazy loading

// 第一种方式：

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')

  }

]