使用は

Question

マイsrcフォルダには、以下の木のように見えると再生はだから私は（非同期VUE成分の配列（blog_post_components）を作成しようとしています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 

で見つけることができますpost.vue、post1.vue、post2.vue）を使用して、後で使用することができます。しかし、forループを使用してblog_post_componentsを作成すると、コンパイルされたWebサイトにエラーが発生します。一方、私がそれらのすべてを単にリストすると、ウェブサイトは意図したとおりに動作しています。

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は非同期動作です。 var iがスコープの上部に吊り下げられており、実際に関数が実行されるときにi == 3が実行されるため、../components/blogpost/post3を3回要求する可能性があります。 iがループの内側にスコープされるように、ループを変更してletを使用してみてください。

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