Vue.js 3.0 Router 사용하기
03 Apr 2022 | Vue.jsVue.js 3.0 Router 예제
Routing 기능은 특정 페이지로 이동하는 기능입니다.
설치 방법
npm install vue-router@4 또는 yarn add vue-router@4
간단한 예제
다음은 Vue Router를 설치하면 기본적으로 생성되는 예제입니다. <router-link> 태그 안에 Routing된 페이지가 출력됩니다.
Routing을 위해 <a> 태그를 이용해도 되지만, 이 경우 전체 페이지가 리로딩이 되는데, <router-link>를 이용할 경우 전체 페이지 리로딩 없이 <router-link> 안에 Routing된 페이지를 출력할 수 있습니다.
App.vue
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
router/index.js
Routing을 원하는 경로를 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(process.env.BASE_URL),
routes,
});
export default router;
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
Todo App의 Router 예제
간단한 Todo App을 만든다고 할 때 Router 기능 사용 예제입니다.
router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import TodoListView from "../views/TodoListView.vue";
import TodoView from "../views/TodoView.vue";
import AboutView from "../views/AboutView.vue";
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: AboutView,
},
{
path: "todos",
name: "todos",
component: TodoListView,
},
{
path: "todos/:id",
name: "todo",
component: TodoView,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
TodoListView.vue
router.push() 함수를 이용한 Routing
...
<script>
setup() {
...
const router = useRouter();
const moveToPage = (todoId) => {
router.push(`/todos/${todoId}`);
};
}
</script>
Routing Name을 이용한 Routing
...
<script>
setup() {
...
const router = useRouter();
const moveToPage = (todoId) => {
router.push({
name: "Todo",
params: {
id: todoId
}
});
};
}
</script>
