[Vue] 🎐Vue Router 사용법

▷ Vue Router

🎐 설치

npm install vue-router

main.js

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

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

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView,
  },
];
const router = createRouter({
  history: createWebHistory('/'),
  routes,
});

export default router;

---

🎐 RouterLink

페이지를 리로딩하지 않고 URL에 매핑된 페이지를 렌더링 한다.

<RouterLink to="/about">About</RouterLink>

// active-class
<RouterLink active-class="active" to="/about">About</RouterLink>

---

🎐 현재 경로, 경로 이름 알아내기

<template>
  <ul>
    <li>$route.name: {{ $route.name }}</li>
    <li>$route.path: {{ $route.path }}</li>
  </ul>
</template>

---

🎐 useRouter, useRoute

useRouter : 라우터 인스턴스로 javascript에서 다른 페이지로 이동할 수 있다.
useRoute : 현재 활성 라우트 정보에 접근할 수 있다. (읽기 전용)

<script setup>
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
console.log('route.name: ', route.name);
console.log('route.path: ', route.path);
const goAboutPage = () => router.push('/about');
</script>
<template>
  <h1>Home Page</h1>
  <button @click="goAboutPage">About 페이지로 이동</button>
</template>

---

🎐 동적 라우팅 - params

const routes = [
  {
    path: '/posts/:id',
    component: PostDetailView,
  },
  {
    path: '/posts/:id/edit',
    component: PostEditView,
  },
];

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

<div>User {{ $route.params.id }}</div>'