이게 잘 이해가 안간다...

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: "/home",
        name: "Home",
        component: Home
    },
    {
        path: "/about",
        name: "About",
        component: About
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router;

 

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter);

// const routes = [
//     {
//         path: "/home",
//         component: Home
//     },
//     {
//         path: "/about",
//         name: "About",
//         component: About
//     }
// ];

const router = new VueRouter({
    routes: [
        {path: '/home', component: Home},
        {path: '/about', component: About},
    ]
    // mode: 'history',
    // base: process.env.BASE_URL,
    // routes
})

export default router;

 

둘 다 똑같이 작동이 된다. 무슨 차이일까?

 

 

 

이렇게도 된다.

import Vue from 'vue';
import VueRouter from 'vue-router';
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: "/home",
        component: () => import('../components/Home.')
    },
    {
        path: "/about",
        component: () => import('../components/About.')
    }
];

// const router = new VueRouter({
//     routes: [
//         {path: '/home', component: Home},
//         {path: '/about', component: About},
//     ]
//     // mode: 'history',
//     // base: process.env.BASE_URL,
//     // routes
// })

export default router;

작동이 잘 된다.