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：如何从 .vue 文件初始化（构造）一个 Vue 组件？

以下代码完美运行！

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文件。