Vue - Router

Vue-Router 사용하기

vue-router 설치

npm i vue-router

src/routes/index.js 파일 생성 후 작성

import {createRouter, createWebHashHistory} from "vue-router";
import Home from "./Home";
import About from "./About";
import Docs from "./Docs";
import NotFound from "./NotFound";

export default createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/", // url
            component: Home // Home 컴포넌트 렌더링
        },
        {
            path: "/about",
            component: About
        },
        {
            path: "/documents/:id", // 동적 파라미터
            component: Docs
        },
        {
            path: "/:notFound(.*)", // 위 url 외 주소로 이동 시 
            component: NotFound // NotFound 컴포넌트 렌더링
        }
    ]
});

main.js에 router 플러그인 적용

import { createApp } from "vue";
import App from "~/App";
import router from "~/routes";

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

라우터 사용

• <RouterLink/>: 페이지 링크, <a/> 태그와 유사
• <RouterVuew/>: 페이지 렌더링 부분
• $router: page에 대한 제어
• $route: page에 대한 정보

<RouterLink/> 컴포넌트가 아니더라도 $router의 push 함수를 사용하여 페이지를 이동시킬 수 있다.

<template>
  <RouterLink to="/">
    Home
  </RouterLink>
  <RouterLink to="/about">
    About
  </RouterLink>
  <button @click="$router.push('/')">
    Home
  </button>
  <button @click="$router.push('/about')">
    About
  </button>
  <RouterView />
</template>

<script>

export default {
  data() {
    return {
      msg: "Hello Vue!",
    };
  },
};
</script>

다이나믹 라우팅

: 뒤에 파라미터 이름 지정
현재는 "/documents" 로 이동 시 404 페이지가 렌더링 된다.

// Docs.vue

<template>
  <h1>Docs.vue</h1>
  <h2>{{ $route.params.id }}</h2>
</template>

children 속성 내부에 작성하면 "/documents" 로 이동 시 부모와 자식 컴포넌트를 같이 렌더링 한다.

자식 컴포넌트 앞에 / 붙이면 루트로 인식하기 때문에 주의해야 한다.

// Docs.vue

<template>
  <h1>Docs.vue</h1>
  <RouterView /> <!-- 하위 컴포넌트를 명시해야 함 -->
</template>

하위 컴포넌트만 렌더링 하고 싶을 때는 별도의 라우터 경로로 작성하면 된다.

이름 부여하기

경로에 이름을 부여할 수 있다.
부여한 이름을 지정해서 페이지를 이동시킬 수 있다.
또한 name으로 페이지 이동을 하게 되면 이동 경로를 직관적으로 작성할 수 있다.

<RouterLink
    :to="{ 
      name: 'docsId',
      params: { id: '7777'},
      query: { name: 'Leon', age: 32, email: 'abc@gmail.com'} }">
    Documents ID
</RouterLink>
<button @click="$router.push({name: 'home'})">
    Home
  </button>
  <button @click="$router.push({name: 'about'})">
    About
  </button>