코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 12일차

[Vue 12일차]
~8.2 뷰 라우터 추가 기능 사용하기
(종이책 p.351-373)

동적 경로 매칭

// src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import UserView from "@/views/UserView.vue";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '',
            name: 'home',
            component: HomeView,
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('../views/AboutView.vue'),
        },
        {
            path: '/:user/:id',
            name: 'user',
            component: UserView
        }
    ],
});

export default router;

// src/views/UserView.vue

<template>
    <div>
      <h1>User Profile</h1>
      <p>User: {{ user }}</p>
      <p>ID: {{ id }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UserView',
    computed: {
      user() {
        return this.$route.params.user;
      },
      id() {
        return this.$route.params.id;
      }
    }
  }
  </script>
  
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

// src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <nav>
    <RouterLink to="/">home</RouterLink><br>
    <RouterLink to="/about">about</RouterLink>
  </nav>
  <RouterView />
</template>

https://localhost:5173/usr/John 으로 주소를 타이핑하면

매개변수 가져오기

/user/info?name=mike&age=30

URL 끝에 ?로 매개변수를 붙여 요청하는 경우 ?뒤에 오는 일련의 문자를 쿼리 스트링이라 한다.

쿼리 스트링(query string)은 대부분 URL을 요청할 때 추가 정보를 제공하기 위해 사용.

// src/views/UserView.vue

<template>
    <div>
      <h1>User Profile</h1>
      <p>User: {{ user }}</p>
      <p>ID: {{ id }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'UserView',
    computed: {
      user() {
        return this.$route.params.user;
      },
      id() {
        return this.$route.params.id;
      }
    },
    beforeMount() {
        const name = this.$route.query.name;
        const age = this.$route.query.age;
        console.log(name);
        console.log(age);
    }
  }
  </script>
  
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

예외 처리

정의되지 않은 패스 값을 사용해 애플리케이션에 접근했다면 에러 처리

프로그래밍 방식 탐색

라우터 인스턴스에 내장된 라우트 전환 메서드를 사용해 라우트를 탐색(전환)하는 것

라우트 전환 메서드

.push(path)

.replace(path)

.go(n)

.back()

.forward()

//src/views/HomeView.vue

<template>
    <h1>Home View</h1>
    <nav>
        <a href="#" @click.prevent="$router.push('/')">.push</a>
        <a href="#" @click.prevent="$router.push('/about')">.replace</a>
        <a href="#" @click.prevent="$router.go(-1)">.go</a>
        <a href="#" @click.prevent="$router.forward">.forward</a>
        <a href="#" @click.prevent="$router.back()">.back</a>
    </nav>
</template>
<script>
export default {
    methods: {
        navigateToHome() {
            this.$router.push('/');
        },
        replaceWithAbout() {
            this.$router.replace('/about');
        },
        goBack() {
            this.$router.go(-1);
        },
        goForward() {
            this.$router.go(1);
        },
    },
}
</script>