vue 프로젝트 시작! --AskView.vue

router-link

일반적으로 웹 페이지에서 페이지 이동을 할 때는 사용자가 url을 다 쳐서 이동하지 않습니다.

이 때 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데

그게 바로 <router-link> 입니다.

<router-link to="이동할 URL"></router-link>

실제 코드 예시는 다음과 같습니다.

<div> <router-link to="/login"></router-link> </div>

위 코드를 실행하면 화면에서는 <a> 태그로 변형되서 나옵니다.

따라서 <a> 태그를 클릭하면 /login URL로 이동합니다.

<template>
  <div>
    <p v-for="ask in this.$store.state.ask" :key="ask.id">
      <router-link :to="`item/${ask.id}`">{{ ask.title }}</router-link><br>
      <small>
        {{ ask.time_ago }} 
        by 
        <router-link :to="'/user/' + ask.user">{{ ask.user }}</router-link>
      </small>
    </p>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('FETCH_ASK')
      .then(() => console.log('success'))
      .catch(() => console.log('fail'));
  }
}
</script>

<style>

</style>