javascript - Vue 1.0 -> 2.0 router.start 问题

Question

之前使用router.start带 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 的错误控制台中也没有任何内容。

我明白了:

• App 组件呈现其 <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')