vue中的路由按需加载

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home'
// import Login from './pages/login'
import Index from './pages/index'
// import Product from './pages/product'
// import Detail from './pages/detail'
// import Cart from './pages/cart'
// import Order from './pages/order'
// import OrderConfirm from './pages/orderConfirm'
// import OrderList from './pages/orderList'
// import OrderPay from './pages/orderPay'
// import AliPay from './pages/alipay'
// import { resolve } from 'core-js/fn/promise'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'index',
      children: [
        {
          path: 'index',
          name: 'index',
          component: Index
        }, {
          path: 'product/:id',
          name: 'product',
          // 方式一
          component: resolve => require(['./pages/index.vue'], resolve)
        }, {
          path: 'detail/:id',
          name: 'detail',
            // 方式一
          component: resolve => require(['./pages/Detail.vue'], resolve)
        }
      ]
    }, {
      path: '/login',
      name: 'login',
        // 方式二
      component: () => import('./pages/Login.vue')
    }, {
      path: '/cart',
      name: 'cart',
      component: resolve => require(['./pages/Cart.vue'], resolve)
    }, {
      path: '/order',
      name: 'order',
      component: resolve => require(['./pages/Order.vue'], resolve),
      children: [
        {
          path: 'list',
          name: 'order-list',
          component: resolve => require(['./pages/orderList.vue'], resolve)
        }, {
          path: 'confirm',
          name: 'order-confirm',
          component: resolve => require(['./pages/orderConfirm.vue'], resolve)
        }, {
          path: 'pay',
          name: 'order-pay',
          component: resolve => require(['./pages/orderPay.vue'], resolve)
        }, {
          path: 'alipay',
          name: 'alipay',
          component: resolve => require(['./pages/alipay.vue'], resolve)
        }
      ]
    }
  ]
})

方式二需要安装插件： syntax-dynamic-import
参看官网：npm官网
路由懒加载