iT邦幫忙

0

Vue.js 動態區域註冊元件

  • 分享至 

  • xImage

各位好 小弟初碰Vue.js
目前在嘗試製作一個小專案
碰到一些問題
目前的工具

  1. Webpack 5
  2. Vue.js 2.6

想從基本開始做起
所以並沒有使用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

看更多先前的討論...收起先前的討論...
DanSnow iT邦好手 1 級 ‧ 2021-06-11 19:02:13 檢舉
webpack 需要一部份的固定的路徑,所以你的 import 要弄成類似 import(`@/components/pages/${name}.vue`) 這樣 webpack 才有辦法載入進來,而且它載入是載入整個資料夾下符合條件的檔案
st474ddr iT邦新手 2 級 ‧ 2021-06-11 21:05:57 檢舉
感謝大大回覆
但小弟覺得問題是lazyload的語法無法動態寫入
比較像是Vue裡面import的問題
不太像是webpack的問題
我寫您的方法可以
但這樣就沒有lazyloading了
DanSnow iT邦好手 1 級 ‧ 2021-06-11 22:50:38 檢舉
那是 lazy loading 啊,那個 import 是 webpack 提供的功能 Vue 才不管這個
st474ddr iT邦新手 2 級 ‧ 2021-06-11 23:02:34 檢舉
感謝大大指正
我把code重寫在發問最下方
不知道是不是您的意思
主要小弟卡在Component的名稱我沒辦法動態塞給他
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答