Vue.js + vue-resource + vue-router = 词法声明错误？

Question

尝试将 Vue.js 与 vue-resource 和 vue-router 一起使用时显示错误：

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

据我所知，错误仅在页面加载初始路由时出现，例如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.

已更新

只需将 vm.$http 替换为全局快捷方式 Vue.http

在文档中找到 there。

Answer 2

这是ES6中var和const/let的区别。

ES6 仍会将 let/const 变量提升到块的顶部。但是，在 const/let 声明之前使用变量将导致 ReferenceError。从块的开始到处理声明，变量都在 "temporal dead zone" 中。

有关更多信息，请参阅 ECMAScript® 2017 语言规范 13.3.1 Let and Const Declarations

Vue.js + vue-resource + vue-router = 词法声明错误？

Vue.js + vue-resource + vue-router = Lexical declaration error?

javascript

vue.js

vue-resource

vue-router