Vue 1.0 - > 2.0 router.start問題

Question

以前はrouter.start w/Vue 1.0を使用していました。 Vueの2.0+への移行、およびこの廃止に取り組む際に（明確なエラーなし）の問題に実行している：以前https://vuejs.org/v2/guide/migration-vue-router.html#router-start-replaced

、main.jsに - Appが店舗を初期化し、残りの部分をレンダリングするルートコンポーネントである

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

コンポーネントツリーのこれを以下に置き換えると失敗します。npm run devからのエラーもコンソール内のエラーもありません。

私は、次を参照してください。

• その<router-view>をレンダリングその<header>
• アプリケーションコンポーネントないをレンダリングするアプリケーション・コンポーネント。
• コンソールにエラーはありません。

---

main.jsアプリ（私たちはアプリケーションコンポーネントをロード）マウント：Appコンポーネントは次のようになります（と私たちは<router-view>レンダリング表示されていない）

// 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") 

を：

// 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> 

JSコンソールでエラーが表示されない場合は、このような難しさがあります。 docから

components: { 
    app: app 
} 

引用：：

Answer 1

？

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

これは代わりに機能しますか？

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

Answer 2

componentsは、のような名前-componentVariableペアをする必要がありますなぜあなたはここにVue.util.extendを使用しているA *hash(map)* of components to be made available to the Vue instance.