Question

我拼命尝试使vue和vue-router与Typescript一起使用，并且我一直遇到路由器问题。

由于对我的团队施加了限制，我们无法使用节点和程序包管理器，因此我们不得不使用脚本方法来安装vue和vue-router：

<script src="~/scripts/libs/vue/vue.js"></script>
<script src="~/scripts/libs/vue-router/vue-router.js"></script>

除了使用上述安装vue的方法外，我们也无法使用任何捆绑工具，因为import和require（）也不可用。

就我们而言，vue和打字稿结合在一起并没有问题，但是当我出于某种原因尝试使用vue-router时，我无法在路由器上获取vue。当我尝试按照文档中的说明使用路由器时，出现“没有过载匹配此调用”的消息。

当我沿着这条路线走时，我使用以下命令：

const homeComponent = { template: "<div>Home</div>" };

const routes = [
    { path: "/", component: homeCompoent }
];

const router = new VueRouter({routes});
Vue.use(VueRouter);

const app = new Vue({
    el: "#app",
    router,
    data: { intl: Resources }
});

这是由于缺少路由器过载而开始出现打字稿问题的时候。我也尝试按照文档中的示例进行操作，即使那样，我仍然会从打字稿中得到重载错误。

我最能使用路由器的地方是几年前我发现一个建议，要求有人执行以下操作：

const app = new Vue({
    el: "#app",
    created() {
        $router = router
    }
});

现在，尽管这消除了打字错误，但由于路由器甚至不在那里且未定义，我开始收到错误消息：

vue.js:637 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined" (found in <Root>)

vue.js:1902 TypeError: Cannot read property 'matched' of undefined at render (vue-router.js:93) at createFunctionalComponent (vue.js:3070) at createComponent (vue.js:3243) at _createElement (vue.js:3427) at createElement (vue.js:3365) at Proxy.vm._c (vue.js:3496) at Proxy.eval (eval at createFunction (vue.js:11635), <anonymous>:3:50) at Vue._render (vue.js:3550) at Vue.updateComponent (vue.js:4066) at Watcher.get (vue.js:4477)

现在我很茫然，这时我唯一的选择是删除打字稿，这是我们不愿意做的事情。

Answer 1

您没有定义组件，只是提供了一个对象。它没有定义ComponentOptions，因此失败。只需使其成为一个组件（并正确拼写东西）

const homeComponent = Vue.component('home-component', {
  template: '<div>Home</div>'
})

现在它是一个适当的组件，将具有ComponentOptions，因此不会因未定义matched而出现错误（这是this。$ router的属性）：

const routes = [
  { path: "/", component: homeComponent }
];

尝试将vue-router与Typescript一起使用时，“此调用没有重载”

1 个答案: