Маршрутизатор Vue не работает с отдельными компонентами файла с MeteorJS - PullRequest
Новая
       7

Маршрутизатор Vue не работает с отдельными компонентами файла с MeteorJS

0 голосов
/ 13 декабря 2018

Я пытаюсь заставить 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 чтобы это заработало.Я не знаю, вызывает ли это проблемы.Вот мой цконфиг.

{
    "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.Однако по какой-то причине приложение не имеет $route свойства!Если кто-нибудь знает, как это исправить, мы будем очень признательны.

1 Ответ

0 голосов
/ 13 декабря 2018

Ну, похоже, проблема была в моем tsconfig.esModuleInterop должно быть истинным, но allowSyntheticDefaultImports должно быть ложным.

Далее, непосредственный монтаж компонента не работает - должен был это понять.Это сработало: 

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

Дело в том, что у меня все еще есть <router-view> в компоненте приложения.Я только что переместил реальный маршрутизатор в родительский экземпляр Vue.

...