使用循環創建異步Vue的組件

Question

我src文件看起來像下面的樹和繁殖可在https://github.com/vwxyzjn/loop_async_import

| App.vue 
| main.js 
| 
+---assets 
|  logo.png 
| 
+---components 
| | Hello.vue 
| | 
| \---blogpost 
|   post0.vue 
|   post1.vue 
|   post2.vue 
| 
\---router 
     index.js 

所以我想創建異步VUE組件陣列（blog_post_components）（找到post0.vue，post1.vue，post2.vue），以便我可以稍後使用它們。但是，如果我使用for循環創建blog_post_components，則編譯後的網站將會出現錯誤。另一方面，如果我只是簡單地列出所有這些信息，網站就會按照預期工作。

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '../components/Hello' 

var blog_post_components = [] 

// THIS IS NOT WORKING AS INTENDED 
// Error information: (unknown) Error: Cannot find module './post3'. 

for (var i = 0; i < 3; i++){ 
    blog_post_components.push(() => ({ 
    component: import('../components/blogpost/post' + i) 
    })) 
} 


// THIS IS WORKING AS INTENDED, ALMOST THE SAME AS THE FOR LOOP ABOVE 

// blog_post_components.push(() => ({ 
// component: import('../components/blogpost/post' + 0) 
// })) 
// blog_post_components.push(() => ({ 
// component: import('../components/blogpost/post' + 1) 
// })) 
// blog_post_components.push(() => ({ 
// component: import('../components/blogpost/post' + 2) 
// }) 



console.log(blog_post_components) 

var routes = [ 
    {path: '/', component: Hello} 
] 
for (var j = 0; j < 3; j++){ 
    routes.push({path: '/post/' + j, component: blog_post_components[j]}) 
} 
console.log(routes) 

Vue.use(Router) 
export default new Router({ 
    mode: 'history', 
    base: __dirname, 
    routes: routes 
}) 

爲什麼不能使用此代碼？我真的很感激答案。

// THIS IS NOT WORKING AS INTENDED 

for (var i = 0; i < 2; i++){ 
    blog_post_components.push(() => ({ 
    component: import('../components/blogpost/post' + i) 
    })) 
} 

Answer 1

import是異步操作。您可能要求../components/blogpost/post3三次，因爲var i被懸掛在範圍的頂部，並且該函數實際執行時，i == 3。嘗試更改您的循環以使用let，以便i被限制在循環的內部。

for (let i = 0; i < 2; i++){ 
    blog_post_components.push(() => ({ 
    component: import('../components/blogpost/post' + i) 
    })) 
}