Vue Router Example

April 1, 2023

Vue Router Example

Vue Router Example

vue.js에서 router를 사용하는 방법. vue3 및 vue-router-4를 기준으로 설명
Composition API 사용
src/routes/index.js
- history에서 hash mode 혹은 history mode 설정 가능

import { createRouter, createWebHistory } from "vue-router";
import Component1 from "../components/Component1";
import Component2 from "../components/Component2";

export default new createRouter({
  history: createWebHistory(`${YOUR_PUBLIC_PATH}`),
  routes: [
    { path: "/", component: Component1 },
    { path: "/path", component: Component2 },
  ],
});

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import routes from "./routes/index";

createApp(App).use(routes).mount("#app");

src/App.vue
- router-link는 경로를 나타내는 a 태그
- router-view는 현재 경로와 매칭 되는 router-link 내의 컴포넌트를 그림
- 경로가 /path인 경우 Component2가 router-view 자리에 그려짐

<template>
    <router-link to="/">Component1</router-link>
    <router-link to="/path">Component2</router-link>

    <router-view />
</template>

<script>
import Component1 from "./components/Component1";
import Component2 from "./components/Component2";
export default {
  name: "App",
  components: {
    Component1,
    Component2,
  },
};
</script>

References