Vue.js + vue-resource + vue-router =詞法聲明錯誤？

Question

嘗試將Vue.js與vue-resource和vue-router一起使用時，會顯示錯誤：

ReferenceError：在初始化之前無法訪問詞法聲明`vm'

到目前為止，我一直在跟蹤錯誤，只有當頁面加載了初始路徑時才出現，例如test.com/#/files（error）和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組件實例事件提供的代碼之一。

更新

只需用全局快捷鍵Vue.http替換vm.$http

在那里的文檔中找到。

Answer 2

這是ES6中var和const / let之間的區別。

ES6仍然會將let / const變量提升到塊的頂部。 但是，在const / let聲明之前使用變量將導致ReferenceError。 變量位於塊開始處的“臨時死區”中，直到處理聲明為止。

有關詳細信息，請參閱ECMAScript®2017語言規范 13.3.1 Let和Const聲明