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

Posted 2023-02-22

技术标签:

【中文标题】Vue.js + vue-resource + vue-router = 词法声明错误？【英文标题】：Vue.js + vue-resource + vue-router = Lexical declaration error? 【发布时间】：2017-05-27 19:36:36 【问题描述】：

当尝试将 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');
;

【问题讨论】：

【参考方案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。从块开始到处理声明，该变量处于“临时死区”中。