Vue.js + vue-resource + vue-router = Lexikalischer Deklarationsfehler?

Question

Beim Versuch Vue.js mit vue-Ressource und vue-Router ein Fehler angezeigt wird, zu verwenden:

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

Was ein ich den Fehler aufgespürt es erscheint nur, wenn die Seite mit einer anfänglichen Route geladen wird, z.B test.com/#/files (error) und test.com/ (kein Fehler). Wenn der gesamte Code requestDirectory() durch next() ersetzt wird, wird der Fehler nicht angezeigt. Es scheint also die Code-Struktur zu erben. Irgendwelche Ideen?

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

Sie nicht vm oder this in beforeEnter Rückruf, weil an dieser Stelle Komponente Instanz wurde noch nicht erstellt zugreifen können. Versuchen Sie, den Code in eines der von Komponenteninstanzen bereitgestellten Ereignisse zu verschieben, z. B. created.

AKTUALISIERT

Ersetzen Sie einfach vm.$http mit einer globalen Abkürzung Vue.http

in einer Dokumentation there.

Answer 2

Dies ist der Unterschied zwischen var und const/let in ES6.

ES6 wird weiterhin die Variable let/const an den Anfang des Blocks hissen. Die Verwendung der Variablen vor der /let Deklaration führt jedoch zu einem ReferenceError. Die Variable befindet sich in einer "temporalen Totzone" vom Beginn des Blocks bis zur Verarbeitung der Deklaration.

Weitere Informationen finden Sie, ECMAScript® 2017 -Programmiersprachenspezifikation13.3.1 Let and Const Declarations