从零开始打造基于 Vue3+Vant3 的网页版类掘金 App：沸点页优化 1

从零开始打造基于 Vue3+Vant3 的网页版类掘金 App：沸点页优化 1

在上一篇文章中，我们实现了 "沸点" 页面中 【热榜】 选项卡的推荐圈子及沸点列表展示功能。然而，这个页面还存在一些细节问题需要优化。

当前问题：

• 推荐圈子中没有显示圈子。
• 沸点列表中没有显示沸点发布时间。
• 沸点列表中没有提供跳转到沸点详情页面的链接。

优化目标：

解决以上问题，优化 "沸点" 页面，使其更具可读性和易用性。

优化步骤：

1. 显示圈子

在推荐圈子列表中，添加一个 <span> 元素来显示圈子描述。

<template>
  <div>
    <div v-for="circle in circles" :key="circle.id">
      <div>{{ circle.name }}</div>
      <span>{{ circle.description }}</span>
    </div>
  </div>
</template>

2. 显示沸点发布时间

在沸点列表中，添加一个 <span> 元素来显示沸点发布时间。

<template>
  <div>
    <div v-for="feed in feeds" :key="feed.id">
      <div>{{ feed.title }}</div>
      <span>{{ feed.createdAt }}</span>
    </div>
  </div>
</template>

3. 提供跳转到沸点详情页面的链接

在沸点列表中，将沸点标题包裹在 <router-link> 元素中，并指定跳转目标。

<template>
  <div>
    <div v-for="feed in feeds" :key="feed.id">
      <router-link :to="'/feed/' + feed.id">{{ feed.title }}</router-link>
    </div>
  </div>
</template>

优化后的效果：

优化后的 "沸点" 页面如下所示：

<div>
  <h2>推荐圈子</h2>
  <div>
    <div v-for="circle in circles" :key="circle.id">
      <div>{{ circle.name }}</div>
      <span>{{ circle.description }}</span>
    </div>
  </div>
  <h2>沸点列表</h2>
  <div>
    <div v-for="feed in feeds" :key="feed.id">
      <router-link :to="'/feed/' + feed.id">{{ feed.title }}</router-link>
      <span>{{ feed.createdAt }}</span>
    </div>
  </div>
</div>

总结

通过这些优化，"沸点" 页面变得更加完善和易于使用。用户现在可以查看圈子描述，了解沸点发布时间，并直接跳转到沸点详情页面。这些改进增强了页面的整体用户体验。