코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 11일차

[Vue11일차]
~8.1 뷰 라우터 다루기
(종이책: p.341-350)

뷰 라우터 설치

npm install vue-router@4

// package.json
{
  "name": "ch08_01",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

라우팅 컴포넌트 생성

HomeView.vue, AboutView.vue를 src/views/에 생성

// src/views/HomeView.vue
<template>
    <h1>Home View</h1>
</template>

// src/views/Aboutview.vue
<template>
    <h1>About View</h1>
</template>

라우터 인스턴스 생성 및 등록

import { createRouter } from 'vue-router';
const router = createRouter({  //라우트 구성 객체
  history: ...,
  routes: ...,                 // 라우트 객체 포함
});
export default router;

라우트 객체에 포함할 수 있는 속성

path(필수): 웹 브라우저 주소창에 표시되는 URL의 일부로, 해당 라우트로 이동할 때 매치되는 경로 패턴을 정의

name(선택): 라우트의 고유한 이름을 지정하는 속성으로, 이름을 통해 라우트를 참조할 수 있게 함.

component(필수): 웹 브라우저 주소창에 표시되는 URL과 path 속성에 지정한 경로의 값이 일치할 경우 렌더링할 컴포넌트를 지정함.

// src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '',
            name: 'home',
            component: HomeView,
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('../views/AboutView.vue'),
        },
    ],
});

export default router;

라우터 인스턴스 사용 등록

// src/main.js

import './assets/main.css'

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

const app = createApp(App)
app.use(router)
app.mount('#app')

뷰 라우터 사용하기

// src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <nav>
    <RouterLink to="/">home</RouterLink><br>
    <RouterLink to="/about">about</RouterLink>
  </nav>
  <RouterView />
</template>

첫화면 또는 home 클릭시

about 클릭시