hands on vue3 - 버튼 클릭하여 라우터를 이용해 URL 이동

[목표]

간단한 예제를 만들기 위해

버튼을 생성한다.

 

해당 버튼을 클릭하면 URL 이동을 한다.

router를 사용하여 구현해보자

 

 

버튼을 생성하고

버튼을 누른다면 '/teams'로 이동한다. 

 

 

 

 

수정된 소스

[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>