Блог

Главная - Вопросы по программированию - Загрузка с помощью vue 2, маршрутизатора и vue-загрузчика

Загрузка с помощью vue 2, маршрутизатора и vue-загрузчика

#vue.js #vuejs2 #vue-router #vue-loader

#vue.js #vuejs2 #vue-маршрутизатор #vue-загрузчик

Вопрос:

С vuejs 1 код был: 

 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 .

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

Спасибо

Ответ №1:

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

 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>

Комментарии:

1. Большое спасибо за рабочий фрагмент кода! Теперь в моем приложении написано Unknown custom element: <router-view> . Пытаюсь выяснить, почему…

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

Ответ №2:

Попробуйте это (приложение == Индекс)

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

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

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