Vue3+Vant3网页版类掘金app项目—返回及关注实现

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

1. 路由配置

   在router/index.js中添加以下路由：

   {
     path: '/',
     component: () => import('@/views/Home.vue'),
     children: [
       {
         path: 'follow',
         component: () => import('@/views/Follow.vue'),
       },
     ],
   },
   

2. 标签切换

   在views/Home.vue中添加标签切换组件：

   <van-tabs v-model="activeTab" @change="handleChangeTab">
     <van-tab title="推荐">Recommend</van-tab>
     <van-tab title="关注">Follow</van-tab>
   </van-tabs>
   

   在Home.vue的script部分添加以下代码：

   import { ref } from 'vue';
   
   export default {
     setup() {
       const activeTab = ref('Recommend');
   
       const handleChangeTab = (tab) => {
         activeTab.value = tab.title;
       };
   
       return {
         activeTab,
         handleChangeTab,
       };
     },
   };
   

3. 返回按钮

   在views/Home.vue中添加返回按钮：

   <van-nav-bar title="掘金" left-text="返回" @left-click="handleBack" />
   

   在Home.vue的script部分添加以下代码：

   import { useRouter } from 'vue-router';
   
   export default {
     setup() {
       const router = useRouter();
   
       const handleBack = () => {
         router.push('/');
       };
   
       return {
         handleBack,
       };
     },
   };
   

4. 定位到关注标签

   在router/index.js中添加以下代码：

   {
     path: '/',
     component: () => import('@/views/Home.vue'),
     children: [
       {
         path: 'follow',
         component: () => import('@/views/Follow.vue'),
         beforeEnter: (to, from, next) => {
           if (from.name !== 'Home') {
             next('/');
           } else {
             next();
           }
         },
       },
     ],
   },
   

这样，当点击顶部导航中的返回按钮时，就会返回到首页并定位到关注标签。

希望本教程对您有所帮助。如果您有任何问题，请随时留言。