Vue 1.0 -> 2.0 router.start Ausgabe

Question

Zuvor router.start w/Vue 1.0. Die Migration auf Vue 2.0+, und lief in Probleme (ohne klaren Fehler), wenn diese deprecation Adressierung: https://vuejs.org/v2/guide/migration-vue-router.html#router-start-replaced

, die zuvor in main.js -

-router.start(
- App, 
- "#flightdeck-app", 
- () => { console.log(`app rev ${REVISION}. INTERNAL mode '${INTERNAL}'`) } 
-) 

Wo App eine Wurzelkomponente ist, die den Rest speichern und machen initialisiert des Komponentenbaums. Ersetzen Sie es durch die folgenden fehlschlägt - keine Fehler von npm run dev noch etwas in der Konsole.

Ich sehe:

• Die Komponente App Rendering seine <header>
• Die Komponente App nicht seine <router-view> machen.
• Keine Fehler in der Konsole.

---

main.js Mounts die App (wir die App-Komponente laden):

// main.js 
import Vue from "vue" 
import VueRouter from "vue-router" 
import App from "./App" 
import Overview from "./components/Overview.vue" 
import ItemList from "./components/ItemList.vue" 

Vue.use(VueRouter) 

const router = new VueRouter({ 
    mode: "history", 
    linkActiveClass: "active", 
    routes: [ 
    { path: "/", component: Overview }, 
    // Other paths 
    { path: "*", redirect: "/" } 
    ] 
}) 

router.beforeEach(function() { 
    window.scrollTo(0, 0) 
}) 

export const app = new Vue(Vue.util.extend({router, App}, App)).$mount("#flightdeck-app") 

Die App Komponente wie folgt aussieht (und wir sehen nicht die <router-view> machen):

// App.vue 
<template> 
<div id="app"> 
<header> 
    <div class="mark"> 
    <h1><router-link to="/">flightdeck</router-link></h1> 
    </div> 
</header> 
<div class="content"> 
    <transition name="fade" mode="out-in"> 
    <keep-alive> 
     <router-view :state="state" class="view"> 
     </router-view> 
    </keep-alive> 
    </transition> 
</div> 
</div> 
</template> 

<script> 
import store from "./store" 
import Overview from "./components/Overview" 

export default { 
    components: { 
    "overview": Overview 
    }, 

    data() { 
    return { 
     state: store.state, 
     refresh: false 
    } 
    }, 

    created() { 
    store.restoreCreds() 
    }, 

    mounted() { 
    // Populate the store with our objects. 
    // The Item component is expected to refresh the store as needed. 
    store.fetchAll() 
    } 
} 
</script> 

Das Fehlen von Fehlern in der JS-Konsole macht dies schwierig.

Answer 1

Warum Sie Vue.util.extend hier verwenden?

export const app = new Vue(Vue.util.extend({ 
    router, 
    App 
}, App)).$mount("#flightdeck-app") 

Funktioniert dies stattdessen?

new Vue({ 
    router, 
    render: h => h(App), 
}).$mount('#flightdeck-app') 

Answer 2

components sollte wie Name-componentVariable Paare sein:

components: { 
    app: app 
} 

Zitat aus dem doc: A *hash(map)* of components to be made available to the Vue instance.