라우터 질문 드립니다....ㅜㅠㅠ

[조소영]

list.vue에서 블로그리스트를 클릭하면 해당 상세페이지인 detail.vue로 가게 하고 싶은데 계속 오류가 나더라구요...

[list.vue]
<template>
<div>
<div class="search_bar">
<input @keyup="searchResult(keyword)" placeholder="제목을 검색해보세요." v-model="keyword">
<button type="button" @click="searchResult(keyword)">< img src="../assets/search_icon.png"></button>
</div>

<!--검색전-->
<div v-if="filteredList.length > 0">
<ul class="blog_list">
<li v-for="(list, i) in filteredList" :key="i" @click="counter[i]++;">
<router-link :to="`/detail/${list.id}`" :blogData="blogData">
<div class="post-img" :style="{ 'background-image': 'url(' + list.img + ')' }"></div>
<h3>{{ list.title }}</h3>
<p>{{ list.subtitle }}</p>
<div class="list_bottom">
<span>{{ list.date }}</span>
<span>{{ list.name }}</span>
</div>
<p class="counter">조회수 : {{ counter[i] }}</p>
</router-link>


</div>

<!--검색후-->
<div v-else>
<ul class="blog_list">
<li v-for="(list, i) in blogData" :key="i" @click="counter[i]++;">
<router-link :to="`/detail/${list.id}`" :blogData="blogData">
<div class="post-img" :style="{ 'background-image': 'url(' + list.img + ')' }"></div>
<h3>{{ list.title }}</h3>
<p>{{ list.subtitle }}</p>
<div class="list_bottom">
<span>{{ list.date }}</span>
<span>{{ list.name }}</span>
</div>
<p class="counter">조회수 : {{ counter[i] }}</p>
</router-link>


</div>
</div>
</template>

<script>
import blogData from '../assets/blogData';

export default {
name: 'list',
data() { 
return {
blogData: blogData,
keyword: '',
filteredList: [],
showOriginalLists: true,
counter: [],
 }
 },
methods: {
searchResult(keyword) { 
if (keyword === '') {
this.filteredList = this.blogData;
this.showOriginalLists = true;
 } else {
this.filteredList = this.blogData.filter(item =>
item.title.includes(keyword)
 );
this.showOriginalLists = false;
 }
 },

saveData() {
sessionStorage.setItem('counter', JSON.stringify(this.counter));
 },
loadData() {
const savedCounter = sessionStorage.getItem('counter');
if (savedCounter) {
this.counter = JSON.parse(savedCounter);
 } else { 
this.counter = this.blogData.map(() => 0);
 }
 },
 },
mounted() {
this.loadData();
 },
watch: {
counter: {
handler() {
this.saveData();
 },
deep: true,
 },
 },
};
</script>

[detail.vue]

<template>
<div class="detailpage">
<h2>상세페이지</h2>
<div>
 {{ blogData[$route.params.id].title }}
</div>
</div>
</template>

<script>
export default {
name : 'detailPage',
props : {
blogData : Array,
 },
}
</script>

이렇게 list.vue와 detail.vue 소스 입니다.ㅇ...ㅠㅠ

[codingapple]

li태그 클릭하면 $router.push('/어쩌구') 코드 실행해서 페이지 변경해봅시다

[글쓴이]

글