Vue2：如何指定 vue-router 根组件？

Question

刚升级到Vue2.0，还不是很熟悉。

有一个变化给我带来了麻烦，vue-router初始化[docs]被改变了：

在我的例子中，初始化代码更改如下：

旧

import RootApp from './components/RootApp.vue';

router.start(RootApp, '#app')

新

import RootApp from './components/RootApp.vue';

new Vue({
  el: '#app',
  router: router,
  render: h => h(RootApp)
})

很快我发现以这种新的情况指定RootApp 会使根应用程序代码对我来说模棱两可。

在旧情况下，每个子路由元素的 $root 元素产生 RootApp 实例，而在新情况下，它产生另一个包含 RootApp 实例作为其唯一子级的组件。

那么，麻烦了，有什么方法可以创建RootApp 只是在Vue2 中充当根节点？

或者我猜，有没有办法像下面这样创建一个 Vue 实例（但尝试失败）：

# Failed code to tell what I want

import RootApp from './component/RootApp.vue';
new RootApp({
    el: '#app',
    router: router,
});

Answer 1

测试了半天，发现最后一次尝试也差不多了，再看一个问题：

Vue.js 2: How to initialize(construct) a Vue component from a .vue file?

以下代码完美运行！

import RootApp from './component/RootApp.vue';
const RootAppConstructor = Vue.extend(RootApp);
new RootAppConstructor({
    el: '#app',
    router: router,
});

Answer 2

您可以重构您的 RootApp，以便它的方法/数据等...都驻留在这个新的 Vue 根实例中。

这也意味着将RootApp 的模板复制到您的主index.html（或您使用的任何文件）中。完成后，尽管一切都应该像以前一样正常运行，尽管不是来自单个 .vue 文件。