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

Refresh

November 2018

Views

968 time

1

I was just upgraded to Vue2.0, and not so familiar with it.

One change makes trouble for me, that the vue-router initialization [docs] is changed:

In my case, the initialization code is changed as below:

Old

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

router.start(RootApp, '#app')

New

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

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

Soon I found that specifying the RootApp in such a manner of new case make the root app code ambiguous for me.

That in old case, the $root element of each sub-route element yields the RootApp instance, while in new case, it yields another component which contains the RootApp instance as its only child.

So, it makes trouble, is there any way to create the RootApp just acts the root node in Vue2?

Or I guess, is there any way to create an Vue instance like the below (but failed when tried):

# Failed code to tell what I want

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

2 answers

1

Вы можете реорганизовать RootAppтак , что это методы / данные и т.д. ... все находятся в пределах этого нового экземпляра корневого Вью.

Это также будет означать копирование через RootAppшаблон «s , чтобы ваш главный index.html(или что вы используете файл). Когда это сделано , хотя все должно работать , как и раньше, хотя и не из одного .vueфайла.

3

После долгого времени, чтобы проверить, я обнаружил, что последняя попытка почти нет, увидеть еще один вопрос:

Vue.js 2: Как инициализировать (построить) компонент Vue из .vue файла?

Следующий код работает отлично!

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