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

【问题标题】：Vue.js + vue-resource + vue-router = Lexical declaration error?Vue.js + vue-resource + vue-router = 词法声明错误？
【发布时间】：2023-11-06 10:55:01
【问题描述】：

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

ReferenceError: can't access lexical declaration `vm' before 初始化

据我追踪错误，它仅在页面加载初始路由时出现，例如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');
};

【问题讨论】：

标签： javascript vue.js vue-router vue-resource

【解决方案1】：

您无法在beforeEnter 回调中访问vm 或this，因为此时尚未创建组件的实例。尝试将您的代码移动到组件实例事件提供的其中之一，例如 created。

更新

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

在文档there 中找到。

【讨论】：

我读过这个，但这意味着不能使用 vue-router 和 vue-resource？？
有不同类型的组件——路由器组件都是关于路由的，正如我理解的那样。无论如何，您会尝试通过Vue.http 而不是vm.$http 全局访问它吗？
Vue.http 有效，但它会导致一个新错误“下一个未定义”。总而言之，我将 HTTP 请求放在组件 created 回调中并且它有效。

【解决方案2】：

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

ES6 仍然会将let/const 变量提升到块的顶部。但是，在 const/let 声明之前使用变量会导致 ReferenceError。从块开始到处理声明，该变量处于“临时死区”中。

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

【讨论】：