Vue3 #10

본론

vue router에 대해서 학습했습니다.

 

router 설정하기

router.js

import {
  createRouter,
  createWebHashHistory, // 해쉬 라우터가 생성 /#/list
  createWebHistory, // 그냥 path이름만 생성 /list
} from "vue-router";
import MainComponent from "./components/MainComponent.vue";
import ListComponent from "./components/ListComponent.vue";
import UploadComponent from "./components/UploadComponent.vue";

const routes = [
  { path: "/", component: MainComponent },
  { path: "/list", component: ListComponent },
  { path: "/upload", component: UploadComponent },
];

const router = createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHistory(),
  routes, // short for `routes: routes`
});

export default router;

 

main.js

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

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

 

이런식으로 router를 설정을 해줘야 합니다.

 

App.vue

<script setup>
import { ref } from "vue";
import NavBar from "./components/NavBar.vue";
import MainComponent from "./components/MainComponent.vue";
import ListComponent from "./components/ListComponent.vue";
import UploadComponent from "./components/UploadComponent.vue";
const category = ref("Main");

const setCategory = (data) => {
  category.value = data;
};

const ComponentList = {
  Main: MainComponent,
  List: ListComponent,
  Upload: UploadComponent,
};
</script>

<template>
  <NavBar :category="category" @setCategory="setCategory" />
  <!-- 조건에 맞는 컴포넌트를 사용할 떄 -->
  <component :is="ComponentList[category]"></component>
  <hr />
  <router-view></router-view> // 이 태그안에 라우터가 출력이 됩니다.
</template>

 

Navbar.vue

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { RouterLink } from "vue-router";
const props = defineProps({
  category: String,
});

const emits = defineEmits(["setCategory"]);

const setCategoryHandler = (el) => {
  if (props.category === el) return;
  emits("setCategory", el);
};

const setClassName = (el) => {
  return computed(() => {
    return el === props.category ? "active" : null;
  });
};
</script>

<template>
  <ul>
    <!-- 상태과닐은 되지만 라우터 이동은 안됨 -->
    <li :class="setClassName('Main').value" @click="setCategoryHandler('Main')">
      Main
    </li>
    <li :class="setClassName('List').value" @click="setCategoryHandler('List')">
      List
    </li>
    <li
      :class="setClassName('Upload').value"
      @click="setCategoryHandler('Upload')"
    >
      Upload
    </li>
    <!-- 라우터 이동이됨 -->
    <RouterLink to="/">Main</RouterLink>
    <RouterLink to="/list">List</RouterLink>
    <RouterLink to="/upload">Upload</RouterLink>
  </ul>
</template>

 

li 태그로 묶여진 곳은 props의 value가 emits되어 수정이 되지만 아래 라우터링크는 라우터 이동이 됩니다.

 

정리

설정하는 법은 어렵지 않지만 이해하기까지 오래 걸리는 느낌입니다.;;