Как правильно подгружать компоненты Vue JS?

Question

[Ришат Султанов]

Всем привет.
Начал делать SPA.

Вообщем под каптом Laravel 5.5
Никак не могу понять как подгрузить компонент по нажатию на route.
Сейчас имею такую структуру:

Во вью вывожу так.

<div class="container">
                    <div id="root"></div>
</div>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import App from './App.vue'
import router from './router'

const app = new Vue({
    el: '#root',
    components: { App },
    template: '<app></app>',
    router
})

App.vue

<template v-for="item in items"><code lang="javascript">

</code>
	<div id="root">
	    <router-link :to="{ path: '/test'}" replace>TEST</router-link>
    </div>
</template>

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path: '/test', component: require('./views/Main.vue')}
    ]
})

export default router

Как решить эту проблему чтобы мои роуты были видны ? Или я ошибочно их вызываю во App.vue?

Answer 1

[RidgeA]

забыл

<router-view></router-view>

советую доку почитать https://router.vuejs.org/en/essentials/getting-sta...

и в App.vue что-то не то с тегами.