[VUE.js] vue 게시판 만들기(2)

seyoung·2022년 5월 15일
2

✅ vue router 데이터 종류

vue router로 데이터를 전달할 때 두가지 있다.

query

  • JSON 형태이며 query string 형태로 전달되는 파라미터
  • $router.query로 접근
    query string
    url 뒤에 붙는 키와 값으로 구성된 파라미터들을 의미.
    서버에 추가적인 정보를 전달할 수 있다.
  • 쿼리 스트링으로 값을 전달하고 싶을 때 사용
www.hiyoung.com/about?postid=1

params

  • name 형태에서 파라미터를 전달할 때 사용.
  • $router.params
  • 주소에 포함된 변수를 전달하고 싶을 때 사용
www.hiyoung.com/post/100

✅ vue router 데이터 전달

<router-link
  :to="{
       name:'Detail', 
       params:{contentId:1}
       }"
  ></router-link>
  <!-- Detail페이지로 이동할건데 파라미터로 contentId :1 을 전달해라.-->

2. $router.push

methods:{
	clickList(){
    	this.$router.push({
        	name:'Detail',//detail
          	params:{contentId : 1}
        })
    }
}

router-link가 직관적으로 페이지 이동 확인이 가능해 좋을거같긴 하나,,,
메서드로 값을 전달하는게 유지보수적인 측면에서 더 편할 것 같다.

✅ vue router 데이터 받기

  • 전달받은 contentId를 변수로 지정한 뒤 데이터에서 해당 id에 해당하는 값들을 불러온다.
<template>
  <div>
    <div>{{data.writer}}</div>
    <div>{{data.title}}</div>
    <div>{{data.content}}</div>
  </div>    
</template>

<script>
import data from '@/data'
export default {
  name:'Detail',
  data(){
    const index = this.$route.params.contentId;
    return{
      data:data[index]
    }
  },
}
</script>

상세 페이지 연결

?? url/:contentId? 를 붙여주면 왜 있으면있는대로 없으면 없는대로 가능한건지

  • 클릭한 목록의 index를 detail 페이지의 params로 전달한다.
<template>
<tr v-for="(value, index) in data" :key="index" @click="detail(index)">
        <td>{{ value.writer }}</td>
        <td>{{ value.title }}</td>
        <td>{{ value.content }}</td>
</tr>
</template>

<script>
  methods:{
  	detail(index){
  		this.$route.push({
  			name:"Detail",
  			params:{ contentId: index}
  		})
  	}
  }

</script>
  • 클릭한 목록의 index에 해당하는 data의 정보를 상세 페이지에 불러온다.
<template>
  <div>
    <div>{{data.writer}}</div>
    <div>{{data.title}}</div>
    <div>{{data.content}}</div>
  </div>
</template>
<script>
import data from '@/data'
export default {
  name:'Detail',
  data(){
    const index = this.$route.params.contentId;
    return{
      index:index,
      data:data[index],
    }
  },
}
</script>

상세 페이지 삭제하기

  • splice를 이용해 해당 data의 index번째에 있는 데이터를 삭제한다.
deleteData(){
      alert('데이터를 삭제했습니다.');
      data.splice(this.index,1);
      this.$router.push({
        path:'/'
      })
    }

상세 페이지 수정하기

  • 수정하기를 눌렀을 때 해당 데이터의 index를 create 페이지에 params로 보내주고
  • create 페이지에서는 해당 index의 데이터를 그대로 불러온다.
  • 작성하기와 수정하기 버튼은 b-if를 통해 index의 값이 undefined일때는 작성하기, 그게 아닐때는 수정하기 버튼이 보이도록 해주었다.
<template>
  <div>
    <input v-model="writer" placeholder="글쓴이"/>
    <input v-model="title" placeholder="제목"/>
    <textarea v-model="content" placeholder="내용"/>
    <button @click="write" v-if="index === undefined">작성하기</button>
    <button @click="update" v-else>수정하기</button>
    
  </div>
</template>
<script>
import data from '@/data'
export default {
  name:'Create',
  data(){
    const index = this.$route.params.contentId;
    return{
      data: data,
      writer: index !== undefined ? data[index].writer : "",
      title:index !== undefined ? data[index].title : "",
      content:index !== undefined ? data[index].content : "",
      index:index
    }
  },
  methods:{
    write(){
      this.data.push({
        writer:this.writer,
        title:this.title,
        content:this.content
      })
      this.$router.push({
        path:'/',
      })
    },
    update(){
      this.data[this.index].writer = this.writer;
      this.data[this.index].title = this.title;
      this.data[this.index].content = this.content;
      alert('수정했습니다.')
      this.$router.push({
        path:'/'
      })
    }
  },
  
}
</script>

Reference

https://any-ting.tistory.com/46
https://im-designloper.tistory.com/19

0개의 댓글