正常配置
import Vue from 'vue'import Router from 'vue-router'import Login from '@/components/pages/login'import Capture from '@/components/pages/capture'import List from '@/components/pages/list'import CaptureFail from '@/components/pages/capture-fail'Vue.use(Router)export default new Router({ routes: [
{ path: '/', name: 'Login', component: Login
},
{ path: '/capture', name: 'Capture', component: Capture
},
{ path: '/list', name: 'List', component: List
},
{ path: '/capture-fail', name: 'CaptureFail', component: CaptureFail
}
]
})懒加载配置
import Vue from 'vue'import Router from 'vue-router'// import Login from '@/components/pages/login'// import Capture from '@/components/pages/capture'// import List from '@/components/pages/list'// import CaptureFail from '@/components/pages/capture-fail'Vue.use(Router)export default new Router({ routes: [
{ path: '/', name: 'Login', component: resolve => require(['@/components/pages/login'], resolve) // Login
},
{ path: '/capture', name: 'Capture', component: resolve => require(['@/components/pages/capture'], resolve) // Capture
},
{ path: '/list', name: 'List', component: resolve => require(['@/components/pages/list'], resolve) // List
},
{ path: '/capture-fail', name: 'CaptureFail', component: resolve => require(['@/components/pages/capture-fail'], resolve) // CaptureFail
}
]
})说明
npm run build后会新增路由数量相匹配的.js文件，在切到相应路由时动态加载这个文件。
参考
作者：后除
链接：https://www.jianshu.com/p/9ee757abac9b