Vue 1.0 -> 2.0 路由器启动问题

Question

以前使用router.startw/Vue 1.0。迁移到 Vue 2.0+，并在解决此弃用时遇到问题(没有明显的错误)：https://v2.vuejs.org/v2/guide/migration-vue-router.html#router-start-replaced

此前，在main.js-

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

其中App是根组件，用于初始化存储并呈现组件树的其余部分。将其替换为以下内容将失败 - 没有来自npm run dev的错误，控制台中也没有任何内容。

明白了：

• 呈现其<header>的应用程序组件
• 应用程序组件未呈现其<router-view>。
• 控制台中没有错误。

---

main.js挂载应用程序(我们加载应用程序组件)：

// 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组件如下所示(我们看不到<router-view>渲染)：

// 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控制台中看不到错误使这变得困难。

Answer 1

你为什么在这里使用Vue.util.extend？

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应该是name-componentVariable对，如下所示：

components: {
app: app
}

引用文档：A *hash(map)* of components to be made available to the Vue instance.