Vue 1.0 -> 2.0 router.start 问题答案

【问题标题】：Vue 1.0 -> 2.0 router.start IssueVue 1.0 -> 2.0 router.start 问题
【发布时间】：2016-11-26 23:15:07
【问题描述】：

以前使用带有 Vue 1.0 的 router.start。迁移到 Vue 2.0+，并在解决此弃用问题时遇到问题（没有明显错误）：https://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>
App 组件不呈现其<router-view>。
控制台中没有错误。

main.js 挂载应用（我们加载 App 组件）：

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

【问题讨论】：

您遇到的错误是什么？
@saurabh 无。组件没有在其中呈现组件（也没有显示在 Vue Chrome 扩展中，因此不存在）。更新了问题以反映当前状态。

标签： javascript vue.js

【解决方案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')

【讨论】：

【解决方案2】：

components 应该是名称-组件变量对，例如：

components: {
  app: app
}

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

【讨论】：