hands on vue3 - router 관련 퀴즈 풀어보기(router-link에 변수사용하기)

[목표]

<router-link to="경로">

위와 같이 경로에 직접 URL 경로를 썼었다.

이제는 javascript 변수를 사용하여 동적으로 이용해보자

 

주어진 소스는 아래의 링크에서

얻을 수 있다.

https://tomhoon.tistory.com/390

hands on vue3 - 주어진 소스를 보고 router에 대한 문제를 풀어봐라(router 파라미터사용하기)

 

버튼을 클릭하면

해당하는 팀의 멤버를 보여주는 기능을 구현해보기

 

---

[TeamsList.vue]

<template>
  <ul>
    <teams-item
      v-for="team in teams"
      :key="team.id"
      :id="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>

[TeamsItem.vue]

<template>
  <li>
    <h3>{{ name }}</h3>
    <div class="team-members">{{ memberCount }} Members</div>
    <router-link :to="'/teams/' + id">View Members</router-link>
  </li>
</template>

<script>
export default {
  props: ['id','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>

 

수정된 소스는 두 개다.

수정된 소스에 대해 살펴보자

 

<router-link v-bind:to="'/teams/' + id">View Members</router-link>

router link 태그에 v-bind를 이용하여 

동적으로 변화시켰다. 

 

또 다른 방법으로는 

<template>
  <li>
    <h3>{{ name }}</h3>
    <div class="team-members">{{ memberCount }} Members</div>
    <router-link :to="viewMembers">View Members</router-link>
  </li>
</template>

<script>
export default {
  props: ['id','name', 'memberCount'],
  computed:{
    viewMembers(){
      let path = "/teams/" + this.id;
      return path;
    }
  }
};
</script>

메소드를 생성하여

v-bind:to 에 바인딩 시켜주면 된다. 

 

주의할 점은 

computed가 아닌

methods에 선언하면 작동을 하지 않는다. 

 

method에 선언하면 안되는 이유는

아마도 props에 대한 데이터가 

오지도 않았는데 메소드를 생성하고 메소드 내에 변수로 선언했다면

아마 빈값을 가리키고 있기 때문이지 않을까? 

 

나중에 명확히 알고 다시 설명을 써야겠다!