Vuejs에서 라우팅을 사용해 사용자 환경을 더 좋게 만드는 방법 — 2

만약 본 포스팅은 1편 의 내용을 보시지 않고 오신 방문자분들께서는 첨부된 링크를 통해 1편을 보고 와주기를 부탁드립니다.

이 글은 https://medium.freecodecamp.org/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9 의 글을 번역한 것입니다.
번역이 이상한곳이나 오타를 알려주시면 감사하겠습니다.

Router-view

여러분은 App.vue 파일에서 <router-view> 태그를 보았을겁니다. <router-view>는 기본적으로 컴포넌트가 렌더링된 화면입니다. <router-view>는 모든 컴포넌트를 포함하고있고 현재 경로와 일치하는 컴포넌트를 div에 반환합니다. 우리는 다음 파트에서 애니메이션 전환을 사용할때 route-view에 대해 논의할 것이다.

라우터 안에 파라메터 사용하기

요점은 특정 컴포넌트로 이동시키기위해 파라메터를 사용할 것입니다. 파라메터는 동적 라우팅을 만들어줍니다.

파라메터를 사용하기 위해서는 제품의 목록과 데이터의 배열을 만들어야합니다. 어떤 제품의 링크를 클릭할때, 파라메터를 통해 세부정보 페이지로 이동합니다.

이 상황에서 데이터베이스 또는 제품의 데이터를 검색하는 API를 사용하지 않을것입니다. 우리가 여기서 할일은 데이터베이스처럼 행동할 제품의 배열을 만드는 것입니다.

home.vue 컴포넌트 안의 data() 메서드안에 배열을 넣어보자.

export default {
  name: 'home',
  data () {
    return {
      title: 'Home',
      products:[
      {
        productTitle:"ABCN",
        image       : require('../assets/images/product1.png'),
        productId:1
      },
      {
        productTitle:"KARMA",
        image       : require('../assets/images/product2.png'),
        productId:2
      },
      {
        productTitle:"Tino",
        image       : require('../assets/images/product3.png'),
        productId:3
      },
      {
        productTitle:"EFG",
        image       : require('../assets/images/product4.png'),
        productId:4
      },
      {
        productTitle:"MLI",
        image       : require('../assets/images/product5.png'),
        productId:5
      },
      {
        productTitle:"Banans",
        image       : require('../assets/images/product6.png'),
        productId:6
      }
      ]
    }
  }
}

그 후에 v-for 디렉티브를 사용해 제품의 배열을 가져와 반복시키십시오.

<div class="row">
    <div class="col-md-4 col-lg4" v-for="(data,index) in products" :key="index">
        <img :src="data.image" class="img-fluid">
        <h3>{{data.productTitle}}</h3>
    </div>
</div>

결과:

세부정보 컴포넌트로 이동하기위해, 가장 먼저 클릭 이벤트를 추가해야합니다:

<h3 @click="goTodetail()" >{{data.productTitle}}</h3>

그런 다음 메서드를 추가해주세요:

methods:{
  goTodetail() {
    this.$router.push({name:'details'})
  }

제목을 클릭했다면, undefined를 반환할 것입니다. 그 이유는 세부정보 컴포넌트는 아직 생성된게 없기 때문입니다. 그러니 만들어봅시다.

details.vue

<template>
 <div class="details">
  <div class="container">
   <h1 class="text-primary text-center">{{title}}</h1>
  </div>
 </div>
</template>
<script>
 export default{
  name:'details',
  data(){
   return{
    title:"details"
   }
  }
 }
</script>

우리는 이제 에러없이 이동할 수 있습니다. 😃

이제 데이터베이스가 없을때 세부정보 페이지를 검색하고 일치하는 데이터를 찾아오는 방법은 무엇일까요?

세부정보 컴포넌트에서 같은 제품 배열을 사용할 것입니다. 우리는 URL에서 id를 매칭시켜줄 수 있습니다.

products:[
    { 
      productTitle:"ABCN",
      image       : require('../assets/images/product1.png'),
      productId:1
    },
    {
      productTitle:"KARMA",
      image       : require('../assets/images/product2.png'),
      productId:2
    },
    {
      productTitle:"Tino",
      image       : require('../assets/images/product3.png'),
      productId:3
    },
    {
      productTitle:"EFG",
      image       : require('../assets/images/product4.png'),
      productId:4
    },
    {
      productTitle:"MLI",
      image       : require('../assets/images/product5.png'),
      productId:5
    },
    {
      productTitle:"Banans",
      image       : require('../assets/images/product6.png'),
      productId:6
    }
]

먼저 우리는 id를 goTodetail() 메서드의 매개변수로 세팅해야합니다.

<h3 @click="goTodetail(data.productId)" >{{data.productTitle}}</h3>

그런다음 라우터 메서드에 두번째 파라메터를 추가합니다.

$router 메서드는 두 파라메터를 가질 수 있습니다.: 첫번째, 이동하려는 컴포넌트의 name, 두번째로 id 파라메터 (또는 다른 값).

this.$router.push({name:'details',params:{Pid:proId}})

router 폴더 안의 index.js에 Pid 파라메터를 추가합니다:

{
    path: '/details/:Pid',
    name: 'details',
    component: details
}

home.vue

methods:{
  goTodetail(prodId) {
    this.$router.push({name:'details',params:{Pid:proId}})
  }
}

파라메터와 일치한 것을 가져오려면 이 코드를 사용한다:

this.$route.params.Pid

details.vue

<h2>the product id is :{{this.$route.params.Pid}}</h2>

그 후 details.vue에서 제품 배열을 반복시키고 Pid 파라메터와 일치하는 객체를 확인하고 그 데이터를 반환합니다:

<div class="col-md-12" v-for="(product,index) in products" :key="index">
  <div v-if="proId == product.productId">
    <h1>{{product.productTitle}}</h1>
    <img :src="product.image" class="img-fluid">
  </div>
</div>
///
export default {
  name:'details',
  data() {
   return {
    proId:this.$route.params.Pid,
    title:"details"
  }
}

여러분들은 이제 어떤 제품의 링크를 클릭했을때 제품을 가져오는 것을 보실 수 있습니다!

detail.vue 컴포넌트:

<template>
  <div class="details">
    <div class="container">
      <div class="row">
        <div v-for="(product,index) in products" class="col-md-12" :key="index">
          <div v-if="proId == product.productId">
            <h1>{{ product.productTitle }}</h1>
            <img :src="product.image" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Details',
  data () {
    return {
      proId: this.$route.params.Pid,
      title: 'details',
      products: [
        {
          productTitle: 'ABCN',
          image: require('../assets/images/product1.png'),
          productId: 1
        },
        {
          productTitle: 'KARMA',
          image: require('../assets/images/product2.png'),
          productId: 2
        },
        {
          productTitle: 'Tino',
          image: require('../assets/images/product3.png'),
          productId: 3
        },
        {
          productTitle: 'EFG',
          image: require('../assets/images/product4.png'),
          productId: 4
        },
        {
          productTitle: 'MLI',
          image: require('../assets/images/product5.png'),
          productId: 5
        },
        {
          productTitle: 'Banans',
          image: require('../assets/images/product6.png'),
          productId: 6
        }
      ]
    }
  }
}
</script>

트랜지션

이 파트에서는 컴포넌트에 애니메이션 트랜지션을 추가할 것입니다. 놀라운 navigation꽈 더 나은 UX/UI를 만듭니다.

애니메이션 트랜지션을 만드려면 “<router-view>” 안에 “<transition/>” 태그와 classㅇ의 이름을 제공해야합니다.

App.vue

<transition name="moveInUp">
    <router-view/>
</transition>

컴포넌트의 트랜지션을 애니메이션으로하려면 화면에 들어갈때 트랜지션 태그에 enter-active 를 추가해야합니다. 그리고 leave-active와 css 트랜지션 속성들을 제공해야합니다.

.moveInUp-enter-active{
  opacity: 0;
  transition: opacity 1s ease-in;
}

CSS3 애니메이션 사용하기

우리는 CSS3에서 @keyframes을 사용해 애니메이션을 만들것입니다.

컴포넌트 화면에 들어갈때 화면에 fade 효과를 추가합니다.

.moveInUp-enter-active{
  animation: fadeIn 1s ease-in;
}
@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}

컴포넌트 화면을 떠날때 다른 fade 효과를 추가합니다.

이제 화면을 떠날때 컴포넌트를 위로 이동시켜봅시다.

.moveInUp-leave-active{
  animation: moveInUp .3s ease-in;
}
@keyframes moveInUp{
 0%{
  transform: translateY(0);
 }
  100%{
  transform: translateY(-400px);
 }
}

이제 우리의 애니메이션과 당신을 위한 트랜지션이 만들어 졌습니다.

이렇게- 작업이 끝났습니다! 😆

여기에서 소드 코드 다운로드를 할 수 있습니다.

마무리

Vue.js에서 navigation 할때에 앱이 더욱 예뻐집니다. SPA의 힘이 전해지고 더 나은 사용자 경험을 만들 수 있을 것입니다.
여기까지 모두들 수고하셨습니다!