Vue.js + vue-resource + vue-router =字句宣言エラー？ VUE-リソースとVUE-ルータとVue.jsを使用しようとするとエラーが表示され

Question

：

ReferenceError: can't access lexical declaration `vm' before initialization

限り、ページが最初のルートがロードされたときに、それがのみ表示されますダウンA私は、エラーを追跡し、例えばtest.com/#/files（エラー）とtest.com/（エラーなし）。 requestDirectory()のコードがすべてnext()に置き換えられた場合、エラーは表示されません。だから、コード構造を継承しているようです。何か案は？

const routerComponents = { 
    home: {  template: '<p>Home ...</p>' }, 
    files: { template: '<p>Files</p>' } 
}; 

function requestDirectory(to, from, next) { 
    console.log("Loading files in ..."); 
    vm.$http.post('/api/dir', {dir: 'photos'}).then((res) => { 
     console.log("done"); 
     next() 
    }, (err) => {}); 
} 

const router = new VueRouter({ 
    routes: [ 
     { path: '/', component: routerComponents.home }, 
     { path: '/files', component: routerComponents.files, beforeEnter: requestDirectory } 
    ] 
}); 

const vm = new Vue({ 
    data: { 
     title: 'Home' 
    }, 
    router: router 
}); 

window.onload = function() { 
    vm.$mount('#app'); 
}; 

Answer 1

この時点で、コンポーネントのインスタンスがまだ作成されていないので、あなたはbeforeEnterコールバックでvmまたはthisにアクセスすることはできません。 createdなどのコンポーネントインスタンスイベントによって提供されるコードにコードを移動してください。

ただ、グローバルショートカットドキュメントthereで発見Vue.http

でvm.$httpを置き換える

を更新しました。

Answer 2

これは、ES6でのvarとconst/の間の違いです。

ES6はブロックの先頭に変数let/constを依然として持ち上げます。しかし、const/let宣言の前の変数を使用すると、ReferenceErrorが発生します。変数はブロックの開始から宣言が処理されるまでの「一時的な不感地帯」にあります。

参照詳細については

、ECMAScript®2017言語仕様13.3.1 Let and Const Declarations