非懒加载
import Home form './home.vue'; // ... { name: 'Home', path: '/home', component: Home }
require 异步加载 ‘@/components/home’
{ name: 'Home', path: '/home', component: resolve => require(['@/components/home'], resolve) }
import 引入，动态加载
{ name: 'Home', path: '/home', component: () => import('@/pages/Home/index.vue') }
webpack chunkName
标明相同的
webpackChunkName的路由将会被合并打包进同一JS文件
const Home = () => import( /* webpackChunkName: 'demo' */ , '@/pages/Home/index.vue') const Login = () => import( /* webpackChunkName: 'demo' */ , '@/pages/Login/index.vue') { name: 'Home', path: '/home', component: Home }, { name: 'Login', path: '/login', component: Login }
