[英]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.