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