[Vue.js] vue-router를 사용하는 여러 가지 방법

1.

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;

 

 

2.

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

Vue.use(VueRouter);

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

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

export default router;

 

 

3.

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 router = new VueRouter({
    routes: [
        {path: '/home', component: Home},
        {path: '/about', component: About},
    ],
    mode: 'history',
    base: process.env.BASE_URL,
})

export default router;