Vue路由器无法使用MeteorJS处理单个文件组件答案

【问题标题】：Vue router not working with single file components with MeteorJSVue路由器无法使用MeteorJS处理单个文件组件
【发布时间】：2018-12-12 22:16:54
【问题描述】：

我试图让 Vue 在 MeteorJS 中使用打字稿和单文件组件工作。可悲的是，它不起作用。我相信这与 App.vue 没有设置 $route 属性有关。这是我的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 属性！如果有人知道如何解决这个问题，将不胜感激。

【问题讨论】：

标签： meteor vue.js vue-router

【解决方案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 实例。

【讨论】：