TIL-69, Vue Route

얼마전 처음으로 Vue를 이용한 과제를 만들어봤는데,

차트들을 단순히 조건부로 display none 해주는 방식으로 화면에 표현했다.

하지만 당연히, 그것은 정석이 아니고(물론 ‘정답’이 어디 있겠냐만), route를 해줘야 한다.

Vue3를 기준으로 Home과 About을 route하는 법을 알아보도록 하자.

npm install vue-router@next 를 입력해 vue-router를 설치한다.

(Vue3 부터는 반드시 @next를 붙여야한다.)

/src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";

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

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

export default router;

위 라우터 모듈에서 라우팅을 해주고,

/src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

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

main.js에서 라우터 모듈을 가져온다.

이 단계 까지가 route의 설정 부분이고,

주소창에 설정한 route 주소를 입력하면 정상적으로 route된다.

page에서 link를 만들고자 한다면,

<router-link> 를 이용한다.

/src/App.vue