리스트에 출력된 게시물을 클릭 시 해당 글로 이동하게 하려고 한다.
item.id
를 넘겨주었다.<div class="post-box" @click="movePost(item.id)">
const movePost = (_id) => {
router.push({
name: "Post",
params: {
id: _id,
},
});
};
{
path: '/post',
name: 'Post',
component: PostView,
props: true,
},
props
로 id
값을 전달받는다.// PostView.vue
import PostsList from "@/assets/data.json";
export default {
props: {
id: Number,
},
computed: {
post(props) {
return PostsList.post[props.id - 1];
},
},
},
<h1 class="post-tit">{{ post.title }}</h1>
<span class="post-date">{{ post.date }}</span>
<span class="post-cate">{{ post.category }}</span>
게시글 상세 컴포넌트 제작 중
뒤로가기 버튼을 만들던 도중 문제가 발생했다.
<button class="back" onclick="history.back()"></button>
history.back() 함수를 사용하면 바로 전 url 로 돌아간다.
하지만 list 의 url 은 카테고리를 선택하더라도 변함 없이 '/' 이다
그렇기 때문에 예를 들어
vue 카테고리를 선택 후 특정 게시물로 진입 후 뒤로가기 할 시 vue 카테고리를 다시 보여주는 게 아닌 total 로 돌아간다.
cache 를 배우면 해결할 수 있는 부분인 것 같다.
잠시 버튼 기능은 비활성화 하고 텍스트 출력으로..