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

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

）提供的代码之一

<强> 已更新

只需使用全局快捷方式vm.$http

替换Vue.http即可

在文档there中找到。

Answer 2

这是ES6中const和let / let之间的差异。

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

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

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

2 个答案: