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 会使根应用程序代码对我来说不明确。

在旧情况下，每个 sub-route 元素的 $root 元素产生 RootApp 实例，而在新情况下，它产生另一个组件，其中包含 RootApp 实例作为它唯一的 child.

所以，麻烦了，有没有什么办法可以创建RootApp just acts the root node in Vue2?

或者我想，有没有办法创建如下所示的 Vue 实例（但尝试时失败）：

# Failed code to tell what I want

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

Answer 1

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

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

Answer 2

测试了半天，发现最后的尝试差不多了，看另一题：

以下代码运行完美！

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

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

Vue2: How to specify the vue-router root component?

mvvm

ecmascript-6

vue.js

vue-router

vuejs2

旧

新建