Router

 

라우트에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려준다.

 

각 vue 폴더 별로 index.vue (ex -  /app/chart/index.vue)

<template>
    <router-view/>
</template>

 

App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>

</style>

 

main.js

import Vue from 'vue'
import App from './App.vue'
import {store} from "./state/state";
import router from "./router";

Vue.config.productionTip = false

new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')

 

router.js

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

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        component: () => import('./app/index'),
        redirect: '/home',
        children: [
            {
                path: '/home',
                component: () => import('./app/home')
            },
            {
                path: '/vuexTest',
                component: () => import('./app/vuexTest')
            },
            {
                path: '/routerTest',
                component: () => import('./app/routerTest')
            },
            {
                path: '/ifElseTest',
                component: () => import('./app/interactiveTest')
            },
            {
                path: '/modelTest',
                component: () => import('./app/modelTest')
            },
            {
                path: '/connectionTest',
                component: () => import('./app/connectionTest')
            }
        ]
    },
    {
        path: '/chart',
        component: () => import('./app/chart'),
        redirect: '/chart/menu',
        children: [
            {
                path: '/chart/menu',
                component: () => import('./app/chart/menu')
            }
        ]
    }
]

const router = new VueRouter({
    routes
})

export default router;

children 통해서 폴더 안에 있는 vue를 불러와 사용한다.