[Vue+Vite] Vue+Vite 라우터 사용하기

https://router.vuejs.org/installation.html

Vue Router | The official Router for Vue.js

 

 

 

라우터를 설치한다. 

 

 

 

 

src -> router 폴더를 생성하고 

 

index.js를 생성한다.

 

 

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "ex) /list",
    component: ex) List,
  }
];

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

export default router;

 

 

routes 안에 경로랑 컴포넌트를 작성한다.

아래와 같이

const routes = [

  {

    path: "/",

    component: Home,

    meta: { isMenu: false, dark: true },

  },

  {

    path: "/message",

    component: Message,

    title: "메시지",

    meta: { isMenu: true, dark: false },

  },

  {

    path: "/credit",

    component: Credit,

    title: "크레딧",

    meta: { isMenu: true, dark: false },

  },

];

 

 

그리고 

 

 

main.js에서 라우터를 사용하면됨

 

 

 

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import router from "./router";

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

 

 

거진 네브바에서 사용하게되는데 

 

사용을 하려면

 

 

    <nav>

      <ul :class="{ 'text-gray-300': !scrolled, 'text-black': scrolled }">

        <router-link

          :to="route.path"

          class="cursor-pointer"

          v-for="route in routes"

          :key="route"

        >

          <li class="inline-block w-14 mr-24" v-if="route.meta.isMenu">

            {{ route.title }}

          </li>

        </router-link>

      </ul>

    </nav>

 

와 같이 router-link 태그를 감싸서 사용하면됨

 

그리고 

 

router-view를 사용하여 화면들을 출력될 곳을 지정해주면 됨

<template>

  <!-- 네브바 -->

  <Navbar />

  <!-- 라우터 뷰 -->

  <router-view />

  <!-- footer -->

  <Footer />

</template>