各位好 小弟初碰Vue.js
目前在嘗試製作一個小專案
碰到一些問題
目前的工具
想從基本開始做起
所以並沒有使用Vue-cli, Vuex, Vue-router
回到正題:
目前的專案是類似一個dashboard
小弟希望header, sidebar...都固定
而page-content是dynamic impact的
也就是使用
<component :is="nowPage"></component>
的方式
所以理應會有一個頁面需要大量import那些頁面檔
像是
//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myPage1 from './myPage1'
import myPage2 from './myPage2'
import myPage3 from './myPage3'
import myPage4 from './myPage4'
小弟想把這些頁面檔拆成一個js檔統一管理
//page.js
export default {
myPage1: '@/components/pages/myPage1.vue',
myPage2: '@/components/pages/myPage2.vue',
myPage3: '@/components/pages/myPage3.vue',
myPage4: '@/components/pages/myPage4.vue'
}
可是當我要在Components引入時遇到問題
正常的lazyloading是可以跑的
//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myPage1 from './myPage1'
import myPage2 from './myPage2'
import myPage3 from './myPage3'
import myPage4 from './myPage4'
export default {
name: 'DashboardWrapper',
components: {
DashboardFooter,
PageHeader,
myPage1: () => ({
component: import('@/components/pages/myPage1.vue'),
delay: 300,
}),
myPage2: () => ({
component: import('@/components/pages/myPage2.vue'),
delay: 300,
}),
myPage3: () => ({
component: import('@/components/pages/myPage3.vue'),
delay: 300,
}),
myPage4: () => ({
component: import('@/components/pages/myPage4.vue'),
delay: 300,
}),
},
}
但因為我想把他縮減成動態的方式
我嘗試用Object.keys的方式組成lazyloading語法
//dashboard-wrapper.vue
import DashboardFooter from './dashboard-footer'
import PageHeader from './page-header'
import myComponents from './pages'
const DynamicComponent = Object.keys(myComponents).reduce((obj, name) => {
return Object.assign(obj, { [name]: () => import(myComponents[name]) })
}, {})
export default {
name: 'DashboardWrapper',
components: {
DashboardFooter,
PageHeader,
DynamicComponent
},
}
但卻碰到了Error
Components裡面也不給放Object.keys等方法
所以想詢問大大是否有辦法可以大量動態lazyloading
或是我這想法有些缺失是我沒發現的
願各位大大指點迷津
根據@DanSnow大大
function lazyloading(page) {
return import(`@/components/pages/${page}.vue`)
}
export default {
components: {
DashboardFooter,
PageHeader,
myPage1: () => ({
component: lazyloading('myPage1'),
delay: 300,
}),
myPage2: () => ({
component: lazyloading('myPage2'),
delay: 300,
}),
myPage3: () => ({
component: lazyloading('myPage3'),
delay: 300,
}),
myPage4: () => ({
component: lazyloading('myPage4'),
delay: 300,
}),
},
}
找到一個接近我需求的連結
可是他是用全域註冊
https://www.itread01.com/content/1559131505.html