hands on vue3 - router에서 url 쿼리스트링을 props로 받기

[목표]

예를 들어 네이버의 메인페이지에 갈 때 

URL 뒤에 main이 붙는다고 가정해보자

http://naver.com/main 

 

naver.com 뒤에 오는 쿼리스트링을

this.$route 를 이용해 가져오지 않고

컴포넌트에서 바로 쓸 수 있도록 props 옵션을 사용해보자

 

기존에 소스는 아래 링크를 통해 얻을 수 있다.

https://tomhoon.tistory.com/384

 

---

main.js의 라우터 설정에서

props를 true로 설정해준다.

 

그리고

 

라우터 경로에

적용되는 컴포넌트 안에 props로 받아주면 

바로 사용가능하다.

 

---

[TeamsMembers.vue]

<template>
  <section>
    <h2>{{ teamName }}</h2>
    <ul>
      <user-item
        v-for="member in members"
        :key="member.id"
        :id="member.id"
        :name="member.fullName"
        :role="member.role"
      ></user-item>
    </ul>
    <router-link to="/teams/t2">Go To Team2</router-link>
  </section>
</template>

<script>
import UserItem from '../users/UserItem.vue';

export default {
  inject: ['teams', 'users'],
  props: ['teamsId'],
  components: {
    UserItem
  },
  data(){
    return{
      members:[],
    };
  },
  methods:{
    changeData(){
      let result = this.teams.find((element) => {
        for(let i in element.members){
          return element.id == this.teamsId;
        }
      });       

      for(let i in result.members){
        this.users.find((element)=>{
          if(element.id == result.members[i]){
            this.members.push(element);
          }
        });
      }
      }
  },
  created(){
    this.changeData();
  },
  watch:{
    teamsId(){
      this.changeData();
    }
  }
};
</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,
        props: true,
    },

],
    linkActiveClass: '커스텀클래스명'
});
app.use(router);

app.mount('#app');

 

수정되지 않은

나머지 소스들은

이전의 포스팅에서 확인할 수 있다.