vue router로 데이터를 전달할 때 두가지 있다.
www.hiyoung.com/about?postid=1
www.hiyoung.com/post/100
<router-link
:to="{
name:'Detail',
params:{contentId:1}
}"
></router-link>
<!-- Detail페이지로 이동할건데 파라미터로 contentId :1 을 전달해라.-->
methods:{
clickList(){
this.$router.push({
name:'Detail',//detail
params:{contentId : 1}
})
}
}
router-link가 직관적으로 페이지 이동 확인이 가능해 좋을거같긴 하나,,,
메서드로 값을 전달하는게 유지보수적인 측면에서 더 편할 것 같다.
<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? 를 붙여주면 왜 있으면있는대로 없으면 없는대로 가능한건지
<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>
<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>
deleteData(){
alert('데이터를 삭제했습니다.');
data.splice(this.index,1);
this.$router.push({
path:'/'
})
}
<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>
https://any-ting.tistory.com/46
https://im-designloper.tistory.com/19