2016-10-04 3 views
1

С 1 vuejs код был:Bootstraping с Vue 2, маршрутизатор и вю-погрузчик

const App = Vue.extend(Index); 
router.start(App, '#app'); 

Где Index является компонентом.

Я стараюсь, чтобы преобразовать его в VUE 2, как это:

const App = Vue.extend(Index); 
const app = new App(router).$mount('#app'); 

Но это дает [Vue warn]: Error when rendering root instance.

Каков правильный способ переписать это?

благодаря

ответ

4

Вы должны дать маршрутизатор в качестве параметра:

const app = new App({ router }).$mount('#app'); 

Пример:

const Index = { 
 
    template: `<div id="app">It's working!</div>` 
 
} 
 
const App = Vue.extend(Index) 
 
const router = new VueRouter() 
 

 
const app = new App({ router }).$mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 
<div id="app"></div>

+0

Большое спасибо за фрагмент рабочего кода! Теперь в моем приложении говорится «Неизвестный пользовательский элемент: '. Попытка выяснить, почему ... –

+1

Если вы используете npm и webpack/browsify, вам нужно вызвать 'Vue.use (VueRouter)', чтобы удостовериться, что vue-router зарегистрировал компонент '' @francoisromain – Atinux

+0

Это было именно то, проблема ... спасибо –

2

Попробуйте это (App == Index)

const App = Vue.extend(require('./App.vue')) 

const router = new VueRouter({ 
    routes, 
    mode: 'abstract' 
}) 

new App({ 
    router, 
}).$mount('#app') 

 Смежные вопросы

  • Нет связанных вопросов^_^