728x90
[목표]
router로 설정된 path 뒤에 파라미터가 올 수 있다.
그 파라미터들을 queryString이라고도 하는데 vue에서는 어떻게 쿼리스트링을 사용할 것인지에 대해
살펴보자.
먼저 주어진 소스를 보고
조건에 맞게 구현해보고 수정완료 소스와 비교해보자
구현해야할 조건들
1. "/teams/경로(teamId)"로 오는 경우 /teams 뒤에 오는 내용을 파라미터로 받기
2. teamId에 맞는 user를 출력하라. 출력하는 컴포넌트는 TeamMembers.vue
3. teamId와 user에 대한 데이터는 App.vue에서 TeamMembers로 provide & inject로 구현하라
예를 들어서
teams: [ { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] }, { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] }, { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] }, ], users: [ { id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' }, { id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' }, { id: 'u3', fullName: 'Julie Jones', role: 'Engineer' }, { id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' }, { id: 'u5', fullName: 'Marie Smith', role: 'Consultant' }, ],위의 teams 배열의 id값이 't1'인 경우
members 는 'u1', 'u2'이다.
팀이름이 t1의 멤버 고유 번호가 u1,u2라고 생각하면 된다.
아래와 같은 URL로 올 경우
http://local.../teams/팀명(t1 or t2 or t3)
t1을 받아서
해당하는 멤버의 고유번호를 얻는다.
멤버 고유번호로 users 배열에서
해당하는 값을 얻는다.
멤버 값을 얻으면
TeamMember.vue 파일에서
해당 멤버에 대한 내용을 보여준다.
다음은 t1으로 왔을 때 결과물이다.
기존 소스
[src/components/nav/TheNavigation.vue]
<template>
<header>
<nav>
<ul>
<li>
<router-link to="/teams">Teams</router-link>
</li>
<li>
<router-link to="/users">Users</router-link>
</li>
</ul>
</nav>
</header>
</template>
<style scoped>
header {
width: 100%;
height: 5rem;
background-color: #11005c;
}
nav {
height: 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
li {
margin: 0 2rem;
}
a {
font: inherit;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
color: white;
padding: 0.5rem 1.5rem;
display: inline-block;
}
a:hover,
a:active {
color: #f1a80a;
border-color: #f1a80a;
background-color: #1a037e;
}
</style>[src/components/teams/TeamMembers.vue]
<template>
<section>
<h2>{{ teamName }}</h2>
<ul>
<user-item
v-for="member in members"
:key="member.id"
:name="member.fullName"
:role="member.role"
></user-item>
</ul>
</section>
</template>
<script>
import UserItem from '../users/UserItem.vue';
export default {
components: {
UserItem
},
data() {
return {
teamName: 'Test',
members: [
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
{ id: 'u2', fullName: 'Max Schwarz', role: 'Engineer' },
],
};
},
};
</script>
<style scoped>
section {
margin: 2rem auto;
max-width: 40rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
border-radius: 12px;
}
h2 {
margin: 0.5rem 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>[src/components/teams/TeamsItem.vue]
<template>
<li>
<h3>{{ name }}</h3>
<div class="team-members">{{ memberCount }} Members</div>
<a href="#">View Members</a>
</li>
</template>
<script>
export default {
props: ['name', 'memberCount'],
};
</script>
<style scoped>
li {
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
border-radius: 12px;
padding: 1rem;
}
li h3 {
margin: 0.5rem 0;
font-size: 1.25rem;
}
li .team-members {
margin: 0.5rem 0;
}
a {
text-decoration: none;
color: white;
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: #11005c;
}
a:hover,
a:active {
background-color: #220a8d;
}
</style>[src/components/teams/TeamsList.vue]
<template>
<ul>
<teams-item
v-for="team in teams"
:key="team.id"
:name="team.name"
:member-count="team.members.length"
></teams-item>
</ul>
</template>
<script>
import TeamsItem from './TeamsItem.vue';
export default {
components: {
TeamsItem,
},
inject: ['teams'],
};
</script>
<style scoped>
ul {
list-style: none;
margin: 2rem auto;
max-width: 40rem;
padding: 0;
}
</style>[src/components/users/UserItem.vue]
<template>
<li>
<h3>{{ name }}</h3>
<div class="role" :class="roleClass">{{ role }}</div>
</li>
</template>
<script>
export default {
props: ['name', 'role'],
computed: {
roleClass() {
if (this.role === 'Engineer') {
return 'role--engineer';
}
if (this.role === 'Consultant') {
return 'role--consultant';
}
return null;
},
},
};
</script>
<style scoped>
li {
margin: 1rem 0;
border: 1px solid #ccc;
padding: 1rem;
}
h3 {
margin: 0.5rem 0;
}
.role {
border-radius: 40px;
background-color: #ccc;
color: #252525;
padding: 0.25rem 1rem;
display: inline-block;
}
.role--engineer {
background-color: blue;
color: white;
}
.role--consultant {
background-color: #af003a;
color: white;
}
</style>[src/components/users/UsersList.vue]
<template>
<button @click="confirmInput">라우터 테스트 버튼</button>
<ul>
<user-item v-for="user in users" :key="user.id" :name="user.fullName" :role="user.role"></user-item>
</ul>
</template>
<script>
import UserItem from './UserItem.vue';
export default {
components: {
UserItem,
},
inject: ['users'],
methods: {
confirmInput(){
this.$router.push('/teams');
},
}
};
</script>
<style scoped>
ul {
list-style: none;
margin: 2rem auto;
max-width: 20rem;
padding: 0;
}
</style>[App.vue]
<template>
<the-navigation></the-navigation>
<main>
<router-view></router-view>
</main>
</template>
<script>
// import TeamsList from './components/teams/TeamsList.vue';
// import UsersList from './components/users/UsersList.vue';
import TheNavigation from './components/nav/TheNavigation.vue';
export default {
components: {
TheNavigation,
// TeamsList,
// UsersList,
},
data() {
return {
activePage: 'teams-list',
teams: [
{ id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
{ id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
{ id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
],
users: [
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
{ id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
{ id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
{ id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
{ id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
],
};
},
provide() {
return {
teams: this.teams,
users: this.users,
};
},
methods: {
setActivePage(page) {
this.activePage = page;
},
},
};
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
</style>[main.js]
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import TeamList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
const router = createRouter({
history:createWebHistory(), //how to manage routing history, what the last page was
routes: [
{path: '/teams', component: TeamList}, //our-domain.com/teams => ...
{path: '/users', component: UsersList},
],
});
const app = createApp(App)
app.use(router);
app.mount('#app');[App.vue]
<template>
<the-navigation></the-navigation>
<main>
<router-view></router-view>
</main>
</template>
<script>
// import TeamsList from './components/teams/TeamsList.vue';
// import UsersList from './components/users/UsersList.vue';
import TheNavigation from './components/nav/TheNavigation.vue';
export default {
components: {
TheNavigation,
},
data() {
return {
activePage: 'teams-list',
teams: [
{ id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
{ id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
{ id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
],
users: [
{ id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
{ id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
{ id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
{ id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
{ id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
],
};
},
provide() {
return {
teams: this.teams,
users: this.users,
};
},
methods: {
setActivePage(page) {
this.activePage = page;
},
},
};
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
</style>
[TeamMembers.vue]
<template>
<section>
<h2>{{ teamName }}</h2>
<ul>
<user-item
v-for="member in members"
:key="member.id"
:name="member.fullName"
:role="member.role"
></user-item>
</ul>
</section>
</template>
<script>
import UserItem from '../users/UserItem.vue';
export default {
inject: ['teams', 'users'],
components: {
UserItem
},
data(){
return{
members:[],
};
},
methods:{
},
created(){
let param = this.$route.params.teamsId;
let result = this.teams.find((element) => {
for(let i in element.members){
return element.id == param;
}
});
for(let i in result.members){
this.users.find((element)=>{
if(element.id == result.members[i]){
this.members.push(element);
}
});
}
},
};
</script>
<style scoped>
section {
margin: 2rem auto;
max-width: 40rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
border-radius: 12px;
}
h2 {
margin: 0.5rem 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>[main.js]
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
import TeamMembers from './components/teams/TeamMembers.vue';
import App from './App.vue';
const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes:[{
path: '/teams',
component: TeamsList,
},
{
path: '/users',
component: UsersList,
},
{
path: '/teams/:teamsId',
component: TeamMembers,
},
],
linkActiveClass: '커스텀클래스명'
});
app.use(router);
app.mount('#app');
핵심은 다음과 같다.
const router = createRouter({
history: createWebHistory(),
routes:[{
path: '/teams',
component: TeamsList,
},
{
path: '/users',
component: UsersList,
},
{
path: '/teams/:teamsId', //핵심!!
component: TeamMembers,
},
'데일리 공부 기록' 카테고리의 다른 글
| hands on vue3 - <router-link to>가 안먹는다? 그 이유는 렌더링 특징 때문이다. (0) | 2023.03.23 |
|---|---|
| hands on vue3 - router 관련 퀴즈 풀어보기(router-link에 변수사용하기) (0) | 2023.03.23 |
| hands on vue3 - 버튼 클릭하여 라우터를 이용해 URL 이동 (0) | 2023.03.22 |
| hands on vue3 - 조건에 따라 option disabled 다르게 먹이기 (0) | 2023.03.22 |
| hands on vue3 - router가 active될 때 css를 위한 커스텀 class명 (0) | 2023.03.22 |
