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声明