正常引入方式：
// 导入Vue import Vue from 'vue' // 导入路由 import Router from 'vue-router' // 导入登录组件 import Login from '@/components/login/Login' // 导入Home组件 import Home from '@/components/home/Home' // 安装路由插件 Vue.use(Router) // 创建路由对象，配置路由规则 const router = new Router({ routers: [ { path: '/login', component: Login }, { path: '/home', component: Home }, ] }) 1 vue异步组件技术
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
相关代码：
const router = new Router({ routers: [ { path: '/login', component: (resolve) => { require(['@/components/login/Login'], resolve)} }, { path: '/home', component: (resolve) => { require(['@/components/home/Home'], resolve)} } ] }) 2 路由懒加载（官方：把组件按组分块）
每个 () => import() 都会生成一个独立的JS文件
也就是说：只要使用这个语法，就是告诉 webpack 这就是一个代码分割点，这样生成一个独立的js文件，来实现按需加载的功能
相关代码：
// 无需import导入组件 const Login = () => import(/* webpackChunkName: 'login' */ '@/components/login/Login') const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home') // 创建路由对象，配置路由规则 const router = new Router({ routers: [ { path: '/login', component: Login }, { path: '/home', component: Home }, ] }) 说明：webpackChunkName 相同，那么，这两个组件会被打包生产一个JS文件
const Goods = () => import(/* webpackChunkName: 'goods' */'@/components/goods') const GoodsAdd = () => import(/* webpackChunkName: 'goods' */'@/components/goods-add') 3 webpack提供的require.ensure()
require.ensure（）的语法：
require.ensure（dependencies：String []，callback：function（require），errorCallback：function（error），chunkName：String）
const router = new Router({ routers: [ { path: '/login', component: r => require.ensure([], () => r(require('@/components/login/Login')), 'login') }, { path: '/home', component: r => require.ensure([], () => r(require('@/components/home/Home')), 'home') }, ] })