【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 返回及关注

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

前言

大家好，昨天我们对优秀作者榜页面进行了优化，修复了两个小问题：滚动翻页数据重复加载和切换标签列表不更新问题。接下来还有几个小功能要实现一下：比如点击顶部导航中的返回按钮时应该返回到首页并定位到关注标签列表，点击关注或者已关注时关注或取消关注对应的作者，点击每个作者项时跳转到新页面-作者主页。本次分享将实现如下功能：

点击返回按钮返回到首页关注列表
点击关注或已关注实现关注或取消关注作者
点击作者信息项跳转到新页面-作者主页

返回关注列表页

目前在我们的首页顶部有很多标签，默认情况下展示的是“推荐”标签页的内容，当我们切换到关注列表页并点击顶部的推荐作者头像时则会跳转的“优秀作者榜”页面，那么对应的点击作者榜中的返回按钮时也应该返回到首页并自动定位到关注列表页面。返回到首页功能很简单，只需要给返回按钮添加一个click事件方法并在方法中通过如下代码即可返回首页

router.push('/)

但是这种方式会有个问题就是返回到首页后依然还是定位到默认的“推荐”标签页中，而不是自动切换到关注标签页，这样显然也不是很友好。那么我们可以通过路由传参的方式给首页再定义一个参数路由，将关注标签的索引通过路由传给首页实现标签切换，具体实现思路如下：

首页在src/router/index.js中为首页添加一个参数路由，参数名为active
然后再Home.vue的onMounted回调函数中接收路由中的参数，如果有值则将值赋值给active响应式属性，如果参数值为空则将active设置为默认值1
最后再将AuthorList.vue中返回按钮方法中router.push('/)改为router.push('/0) 代码及效果如下：

// src/router/index.js
{
    path: '/:active',
    name: 'HomeActive',
    component: Home
  },

Home.vue
setup(){
// 省略其它代码...
 onMounted(() => {
  state.active = route.params.active || 1;
 });
}

关注与取消关注

进入到优秀作者榜后，在每个作者信息后面都会有个关注或已关注的按钮，如果是“+关注”则说明还未关注该作者可通过点击该按钮实现关注，如果按钮是“已关注”则表示已经关注了该作者，点击按钮后则取消对该作者的关注。在前面我们实现该功能时是放了两个按钮的，然后通过返回数据中的isfollowed属性来控制该显示哪个按钮，下面我们就给这两个按钮分别添加两个方法follow和cancelFollow，用于实现关注作者和取消关注作者，通过对官方接口的分析发现，实现关注和取消关注功能分别用的是do和undo两个post请求的接口，接收作者id作为参数。实现思路如下：

首先需要在nodejs服务端项目中封装do和undo两个接口用于请求官方对应的接口
在前端项目AuthorList.vue中定义follow和cancelFollow两个方法并分别调用do和undo接口来实现对作者的关注和取消关注
最后再控制两个按钮的切换，如：关注后则显示已关注按钮，取消关注后则显示关注按钮核心代码及效果如下：

<van-button
    v-show="!item.isfollowed"
    round
    plain
    size="mini"
    type="primary"
    :id="`follow${item.user_id}`"
    @click="follow(item.user_id)"
    >+ 关注</van-button
  >
  <van-button
    v-show="item.isfollowed"
    type="success"
    size="mini"
    round
    :id="`unfollow${item.user_id}`"
    @click="cancelFollow(item.user_id)"
    >已关注</van-button
  >

const follow = function (userId) {
  const followid = document.querySelector(`#follow${userId}`);
  const unfollowid = document.querySelector(`#unfollow${userId}`);
  api.follow(userId).then((res) => {
    followid.style.display = "none";
    unfollowid.style.display = "block";
  });
};

const cancelFollow = function (userId) {
  const followid = document.querySelector(`#follow${userId}`);
  const unfollowid = document.querySelector(`#unfollow${userId}`);
  api.cancelFollow(userId).then((res) => {
    followid.style.display = "block";
    unfollowid.style.display = "none";
  });
};

切换作者主页

还有最后一项功能，就是点击作者信息后跳转到作者主页页面，这个功能比较简单，就是新建一个页面，然后通过路由实现跳转即可，但有一点需要注意的是：因为我们要跳转到作者主页查看作者详细信息，而查询作者信息一般都是通过作者id进行查询，那么为了知道要查询哪个作者的信息，我们在跳转时肯定也得将作者的id顺便传递过去，因此我们在定义作者主页路由时也应该定义成一个参数路由。本次分享中我们仅仅先实现跳转，主页中具体内容暂不实现。

 const toAuthorHome = function (userId) {
  router.push(`/authorHome/${userId}`);
};

总结

本次分享中我实现了3个功能：点击返回按钮返回到首页并自动定位到关注标签页，点击关注或已关注按钮实现对作者的关注或取消关注，点击作者信息项跳转的作者主页页面。致此于优秀作者榜的分享就结束了，下次分享中将实现首页中其它列表项根据子标签的动态切换。好了本次分享就到这里了。