非懒加载
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
}