vue 라우터는 vue 라이브러리를 이용해서 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 라이브러리이다.

✨ 라우터 설치 및 라우터 구현

npm install vue-router@4

📂 폴더 구조

• router 폴더 생성 후 index.js 생성. views 폴더 생성 후 연결할 파일들 생성해 준다.

✍🏻 라우터 등록

📂 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'  

const app = createApp(App)

app.use(router)
app.mount('#app')

⚙️ 라우터 옵션

📂 index.js

import { createRouter, createWebHistory } from 'vue-router'
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'
import UserView from '../views/UserView.vue'

const routes = [
    {
        path: '/',
        component: NewsView
    },
    {
        path: '/news',
        component: NewsView
    },
    {
        path: '/ask',
        component: AskView
    },
    {
        path: '/jobs',
        component: JobsView
    },
    {
        path: '/user',
        component: UserView
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

• 라우터에서 아래 두개의 옵션을 필수로 지정해 줘야 한다.
  - routes : 라우팅 할 URL과 컴포넌트 값 지정
  - history : URL 해쉬 값 제거 속성

✨ 라우터 컴포넌트 표시

📂 App.vue

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

✨ redirect 속성과 router-link

📂 파일 구조

• 네비영역을 컴포넌트로 제작을 위해 파일 및 폴더 생성

🔗 router-link

<router-link to="이동할 URL"></router-link>

📂 ToolBar.vue

<template>
  <div class="header">
    <router-link to="/news">News</router-link> |
    <router-link to="/ask">Ask</router-link> |
    <router-link to="/jobs">Jobs</router-link> |
    <router-link to="/user">User</router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .header {
        color: #fff;
        background-color: steelblue;
        padding: 12px;
        display: flex;
        justify-content: space-evenly;
        align-content: flex-start;
    }
    .header a {
        color: #fff;
    }
    .router-link-active.router-link-exact-active {
        color: goldenrod;
    }
</style>