Question

我正在尝试让Vue在MeteorJS中使用打字稿和单个文件组件工作。可悲的是，它不起作用。我相信这与没有设置$ route属性的App.vue有关。这是我的startup.ts文件。它会创建一个div并挂载主应用程序：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import App from "../imports/App.vue"

//create div to mount app
var appDiv = document.createElement("div")
appDiv.id = "app"
document.body.appendChild(appDiv)

//mount app
var AppVue = Vue.extend(App)
var mainApp = new AppVue();
mainApp.$mount("#app")

App.vue非常简单：

<template>
  <div>
    <router-view class="view"></router-view>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import router from "./startup/router";
import LoginPage from "./client/users/pages/LoginPage/LoginPage.vue"

export default new Vue({
    router: new VueRouter({
        routes: [{
            name: "Login",
            path: "/login",
            component: new Vue({
                render: function (createElement) {
                    return createElement("p", "Login")
                }
            })
        }]
    })
})
</script>

MeteorJS使用commonJS，因此我必须使用allowSyntheticDefaultImports和esModuleInterop使其正常工作。我不知道这是否会引起问题。这是我的tsconfig。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "sourceMap": true
    }
}

它给了我这个错误： "TypeError: Cannot read property 'matched' of undefined"

仔细检查代码可知，尝试呈现时会遇到此错误。特定代码尝试获取parent.$route，其中parent是App组件。但是，由于某些原因，App没有任何$route属性！如果有人知道如何解决此问题，将不胜感激。

Answer 1

好吧，看来问题出在我的tsconfig中。 esModuleInterop应该为true，但是allowSyntheticDefaultImports应该为false。

接下来，直接安装组件不起作用-应该已经意识到这一点。这可行：

var myApp = new Vue({
    el: "#app",
    render: h => h(App),
    router: new VueRouter({
        routes: routes
    })
})

问题是我在App组件中仍然有<router-view>。我只是将实际路由器移到了父Vue实例。

Vue路由器无法与MeteorJS一起使用单个文件组件

1 个答案: