在这里输入<script setup>
import { ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { getBlogList } from '@/api/blog';

// 获取路由对象
const route = useRouter();

// 定义列表和总数的ref
const blogList = ref([]);
const total = ref(0);

// 使用 watchEffect 监听url 参数 page pageSize category keyword 的变化 并获取博客列表和总数
watchEffect(() => {
  const { query } = route;
  const page = parseInt(query.page) || 1;
  const pageSize = parseInt(query.pageSize) || 3;
  const category = query.category || '';
  const keyword = query.keyword || '';

  // 调用api方法获取博客列表和总数
  getBlogList({ page, pageSize, category, keyword })
      .then((res) => {
        console.log('res', res)
        blogList.value = res.data.list;
        total.value = res.data.total;
      })
      .catch((error) => {
        // 处理错误情况
        console.error('获取博客列表失败：', error);
      });
});
</script>

<template>
  <main>
    <!-- 在这里使用获取到的博客列表和总数 -->
    <h1>Home</h1>
    <ul>
      <li v-for="blog in blogList" :key="blog.id">
        {{ blog.title }}
      </li>
    </ul>
    <p>Total: {{ total }}</p>
  </main>
</template>
代码

Home.vue:16 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘page’)
at Home.vue:16:31
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js:1702:16)
at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
at doWatch (runtime-core.esm-bundler.js:1797:12)
at watchEffect (runtime-core.esm-bundler.js:1621:10)
at setup (Home.vue:14:1)
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)