128. Creating Routes
npm create vue@latest
이 강의에서는 라우트 생성하기
- 이전 강의에서 검토한
router
파일 작업을 진행합니다. - 라우트 설정은
routes
라는 변수에 저장됩니다. - Vue 라우터는 객체의 배열을 예상합니다. 각 객체는 루트 기록입니다.
새로운 루트 기록 추가하기
- 홈페이지를 위한 루트를 생성합니다. (
{path: '/', component: 'Home'}
) - 사용자가 애플리케이션을 방문할 때 라우터는 URL에서 경로를 검색하여 등록된 레코드와 일치시킵니다.
- 일치하는 경우 관련 컴포넌트를 로드합니다.
라우터가 컨텐츠를 표시할 위치 지정하기
router-view
컴포넌트를 사용하여 라우터에게 컨텐츠 로드 위치를 지시합니다.- 이 컴포넌트는 Vue 라우터 모듈을 플러그인으로 등록할 때 정의되었습니다.
- 라우터는 생성한 루트 레코드를 바탕으로 어떤 컴포넌트를 로드할지 자동으로 알게 됩니다.
애플리케이션 브라우저에서 테스트하기
- 페이지는 정상적으로 렌더링됩니다.
- 콘솔에서 에러를 확인하여 라우터가 원하는 대로 작동하는지 확인합니다.
- 다른 라우트들도 작동하는지 검토합니다.
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: HomeView
},
{
path: '/about',
component: AboutView
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
src/views/HomeView.vue
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>
<template>
<!-- Introduction -->
<section class="mb-8 py-20 text-white text-center relative">
<div
class="absolute inset-0 w-full h-full bg-contain introduction-bg"
style="background-image: url('assets/img/header.png')"
></div>
<div class="container mx-auto">
<div class="text-white main-header-content">
<h1 class="font-bold text-5xl mb-5">Listen to Great Music!</h1>
<HelloWorld #default="{ user, favorites }">
<p>Hello {{ user.name }}. I like {{ favorites[0] }}</p>
</HelloWorld>
<p class="w-full md:w-8/12 mx-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et dolor mollis, congue
augue non, venenatis elit. Nunc justo eros, suscipit ac aliquet imperdiet, venenatis et
sapien. Duis sed magna pulvinar, fringilla lorem eget, ullamcorper urna.
</p>
</div>
</div>
<img
class="relative block mx-auto mt-5 -mb-20 w-auto max-w-full"
src="/assets/img/introduction-music.png"
/>
</section>
<!-- Main Content -->
<section class="container mx-auto">
<div class="bg-white rounded border border-gray-200 relative flex flex-col">
<div class="px-6 pt-6 pb-5 font-bold border-b border-gray-200">
<span class="card-title">Songs</span>
<!-- Icon -->
<i class="fa fa-headphones-alt float-right text-green-400 text-xl"></i>
</div>
<!-- Playlist -->
<ol id="playlist">
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
</ol>
<!-- .. end Playlist -->
</div>
</section>
</template>
src/views/AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/App.vue
<script setup lang="ts">
import AppHeader from '@/components/AppHeader.vue'
import AppAuth from '@/components/AppAuth.vue'
import useUser from '@/stores/user'
import { auth } from '@/includes/firebase'
import { storeToRefs } from 'pinia'
const userStore = useUser()
const { userLoggedIn } = storeToRefs(userStore)
if (auth.currentUser) {
userLoggedIn.value = true
}
</script>
<template>
<AppHeader />
<RouterView />
<!-- Player -->
<div class="fixed bottom-0 left-0 bg-white px-4 py-2 w-full">
<!-- Track Info -->
<div class="text-center">
<span class="song-title font-bold">Song Title</span> by
<span class="song-artist">Artist</span>
</div>
<div class="flex flex-nowrap gap-4 items-center">
<!-- Play/Pause Button -->
<button type="button">
<i class="fa fa-play text-gray-500 text-xl"></i>
</button>
<!-- Current Position -->
<div class="player-currenttime">00:00</div>
<!-- Scrub Container -->
<div class="w-full h-2 rounded bg-gray-200 relative cursor-pointer">
<!-- Player Ball -->
<span class="absolute -top-2.5 -ml-2.5 text-gray-800 text-lg" style="left: 50%">
<i class="fas fa-circle"></i>
</span>
<!-- Player Progress Bar-->
<span
class="block h-2 rounded bg-gradient-to-r from-green-500 to-green-400"
style="width: 50%"
></span>
</div>
<!-- Duration -->
<div class="player-duration">03:06</div>
</div>
</div>
<AppAuth />
</template>