Vue2 기준 vue-router 설정

main.js

import Vue from "vue";
import App from "./App.vue";
import { router } from "./router/index"; // export 한 router 세팅

Vue.config.productionTip = false;

new Vue({
    render: (h) => h(App),
    router, // vue instance에 router 적용
}).$mount("#app");

src/routers/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import NewsView from "../views/NewsView.vue";
import AskView from "../views/AskView.vue";
import JobsView from "../views/JobsView.vue";

// Vue 애플리케이션이 Vue Router를 전역으로 사용할 수 있도록 설치
Vue.use(VueRouter);

// router 세팅(?)
export const router = new VueRouter({
    routes: [
        {
            path: "/",
            redirect: "/news",
        },
        {
            path: "/news", // 주소
            component: NewsView, // 해당 url에 표시될 컴포넌트
        },
        {
            path: "/ask",
            component: AskView,
        },
        {
            path: "/jobs",
            component: JobsView,
        },
    ],
});

App.vue

<template>
    <div id="app">
    	<!-- 라우터로 설정한 해당하는 url에 맞는 컴포넌트가 보이는 태그(?) -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "App",
};
</script>