[Vue] Vue Router란? / Vue Router 사용 (router-link, useRouter)

Vue Router란?

https://router.vuejs.org/

Vue Router | The official Router for Vue.js

 

vue.js 공식 라우터 라이브러리

SPA를 손쉽게 만들 수 있도록 도와준다.

 

Vue Router가 제공하는 기능

• 컴포넌트 기반의 라우팅을 구현할 수 있다.
• Vue.js의 전환 효과(Transition)를 적용할 수 있다.

---

Vue Router 사용

vue router 설치

npm install vue-router@4

 

 

---

router js 파일 생성

src > router 폴더 생성 > index.js 파일 생성

 

routes 배열 안에 원하는 경로와 해당 경로에 띄울 컴포넌트를 넣어준다.

// router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Main from "../components/Main.vue";
import Stores from "../components/Stores.vue";

const routes = [
  { path: "/", component: Main },
  { path: "/stores", component: Stores },
];

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

export default router;

 

---

router 연결

main.js에서 만들어놓은 router 등록

// main.js
import { createApp } from "vue";
import "./reset.css";
import App from "./App.vue";
import router from "./router";

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

 

 

App.vue에 router-view 연결

// App.vue
<script setup></script>

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

<style scoped>
</style>

---

router 사용

router 파일에 등록한 컴포넌트가 경로에 따라 화면에 보여지게 된다.

<script setup>
import { RouterView } from "vue-router";
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped></style>

 

---

동적 라우트

경로 뒤에 :변수명 을 붙여주면 변수명에 따라서 다른 페이지가 보여진다.

화면이 완전 전환된다.

 

router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Parents from "../components/Parents.vue";
import Child from "../components/Child.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/link01/:num", component: Parents},
    { path: "/link02", component: Child},
  ]
})

export default router;

 

 

Parents.vue

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

const route = useRoute();

onMounted(() => {
  const num = route.params.num;
  console.log(num);
})

</script>

<template>
  <h1>부모 컴포넌트</h1>
</template>

<style scope></style>

 

 

---

 

중첩 라우트

컴포넌트 안에 라우트

회면을 유지하면서 일부만 전환한다.

const router = createRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // UserHome은 /user/:id 가 일치 할 때
        // User의 <router-view> 안에 렌더링된다.
        { path: '', component: UserHome },

      ]
    }
  ]
})

 

---

Router Link 사용

a 태그와 비슷하게 클릭 시 해당 주소로 이동된다.

<script setup>
</script>

<template>
  // router 파일에 등록해놓았던 routes 에 해당 주소로 이동
  // 해당 주소에 등록된 컴포넌트를 보여줌
  <router-link to="/stores">식당</router-link>
</template>

<style scope>

</style>

 

 

---

useRouter

route

현재 URL 경로, 파라미터와 같은 정보를 가지고 있는 객체

import { useRoute } from 'vue-router';

const route = useRoute();

 

router

경로 변경, 뒤로 가기, 앞으로 가기

import { useRouter } from 'vue-router';

const router = useRoute();
router.push("/user");