pc_nuxt/app/pages/info/what/index.vue

<template>
  <ArticleListView
    :col-id="3"
    :heading="heading"
    subtitle="AI 相关问题解答，帮你弄清人工智能的常见概念、原理与使用疑问。"
    base-path="/info/what"
    :page="page"
    :page-size="PAGE_SIZE"
    :list="data?.list || []"
    :total="data?.total || 0"
    :hot-list="data?.hotList || []"
    :tag-list="data?.tagList || []"
    :pending="pending"
  />
</template>

<script setup>
import { useArticleData } from '~/composables/useArticle'
import {
  LEGACY_DEFAULT_DESCRIPTION,
  LEGACY_DEFAULT_KEYWORDS,
  legacyPageTitle,
} from '~/composables/useLegacySeo'

const PAGE_SIZE = 10
const route = useRoute()
const page = computed(() => Number(route.params.page || route.query.page || 1))

const { data, pending } = await useArticleData({
  key: computed(() => `info-what-${page.value}`),
  colId: 3,
  page,
  pageSize: PAGE_SIZE,
})

const heading = computed(() => (page.value > 1 ? `AI 问答（第 ${page.value} 页）` : 'AI 问答'))

const title = computed(() =>
  legacyPageTitle(page.value > 1 ? `AI问答-第${page.value}页` : 'AI问答'))

useSeoMeta({
  title,
  description: LEGACY_DEFAULT_DESCRIPTION,
  keywords: LEGACY_DEFAULT_KEYWORDS,
  ogTitle: title,
  ogType: 'website',
})
useHead({
  link: [{ rel: 'canonical', href: () => `https://tool.aionline.cc${page.value > 1 ? `/info/what${page.value}` : '/info/what'}` }],
})
</script>