我需要在Nuxt CMS捆綁中實作動態頁面。
- 我向服務器發送URL，如果存在這樣的頁面，我將收到資料。
- 該資料包含了我需要使用的組件串列，組件的數量可以是不同的。
- 我需要動態地匯入這些組件并在頁面上使用它們。
我并不完全了解我如何正確地匯入這些組件并使用它們。
我知道我可以使用組件的全域注冊，但是在這種情況下我對動態匯入感興趣。
下面是一個演示，它描述了我的應用程式的大致邏輯。
https://codesandbox.io/s/dank-water-zvwmu?file=/pages/_.vue
uj5u.com熱心網友回復：
這里有一個github問題，可能對你有用。https://github.com/nuxt/components/issues/227#issuecomment-902013353
我以前也用過這樣的東西
<nuxt-dynamic : name="icon"></nuxt-dynamic>
根據icon道具加載動態SVG，感謝dynamic。
既然現在，它已經被烘烤出來了，你應該可以做到
<component :is="componentId" /> //span>
但從性能上看，它的代價很高。
這當然是基于Nuxt 組件和自動匯入它們。 另外，如果你想從任何地方匯入這些東西，你可以按照我的答案來做。
uj5u.com熱心網友回復：
我使用了這個解決方案。我在asyncData鉤子中獲得所有必要的資料，然后在創建的（）鉤子中匯入組件 https://codesandbox.io/s/codesandbox-nuxt-uidc7?file=/pages/index.vue
asyncData({ route, redirect }) {
const dataFromServer = [
{
路徑。"/about",
componentName: 'myComponent'
},
];
const componentData = dataFromServer.find(
(data) => data.path === route.path
);
回傳 { componentData };
},
data() {
回傳 {
selectedRouteData: null,
componentData: {},
importedComponents。[]
};
},
創建() {
this.importComponent()。
},
方法：{
async importComponent() {
const comp = await import(`~/folder/${this.componentData.componentName}.vue`)。
this.importedComponents.push(comp.default)。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/310018.html
標籤：