Vue | vue-router

main.ts 에 라우팅 설정 후
app.vue 에서 navigation 을 만든다

router-link 에 연결된 href 는
routes 에서 사용하고 있는 각 컴포넌트에 연결되고

router-view 에 렌더링 된다

app.vue 를 레이아웃 컴포넌트 처럼 사용하는 방법

main.ts

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

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

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

App.vue

<template>
  <div>
  	<header>
      <nav>
        <router-link to="/">홈</router-link>
        <router-link to="/about">소개</router-link>
      </nav>
    </header>
    <main>
	    <router-view></router-view>
    </main>
  </div>
</template>