✍🏻 오늘 할 일
notice-list 페이지에서 detail 페이지로 유동라우터 연결
list 페이지에서 목록을 클릭했을 때, id값을 넘겨서 해당하는 데이터를 받아와서 뿌려주는 작업을 해야하는데! 프로젝트하면서 몇번 해봤더니 그나마 쉽게 할 수 있었다!
// router -> index.js 파일
export default new VueRouter({
mode : 'history',
routes: [
{
path: '/notice',
name: 'notice',
component: noticeList
},
{
path: '/notice-detail:id',
name: 'notice-detail',
component: noticeDetail
}
]
})
vue에서는 url 주소에 #이 기본적으로 붙는 것 같은데 이걸 없애주려면 mode : 'history'
를 적어주어야 한다.
// notice-list
// template
<div @click="goToDetail(data)" v-for="data in datas" :key="data.noticeNo" class="detail"> </div>
// js
goToDetail(data) {
let num = data.noticeNo;
let type = data.noticeType;
this.$router.push(`/notice-detail:id=${num}=${this.content.noticeType}`); }
// notice-detail
methods: {
async fetchData() {
let id = this.$route.params.id;
let type = this.$route.params.type;
var formData = new FormData();
formData.append("noticeNo", id);
formData.append("noticeType", type);
const res = await noticeDetail.list(formData);
this.content = res.data.result[0];
},