[英]Vuejs lazy loading routes in webpack template
我已经使用vue-cli工具和webpack模板创建了vuejs项目。
vue init webpack my-project
我不知道如何使用模板在路由上实现延迟加载
目前我在router/index.js
有两条路线
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'test',
component: Test
}
]
})
并将其导入main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
但是它不包含延迟加载实现,我该怎么办?
而不是使用
import Test from '@/components/Test'
用于
const Test = () => import('@/components/Test');
这样做的好方法:
function load (component) {
return () => import(`@/${component}.vue`)
}
...
routes: [
{ path: '/', component: load('Hello') },
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.