vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能

本文链接：https://blog.csdn.net/My_IT_Study/article/details/116492808

本文档详细介绍了在Vue.js项目中实现抖音APP顶部导航栏的开发过程，包括开发思路、布局分析和基础架构实现。导航栏分为直播、关注、推荐和搜索四个部分，仅存在于首页。文中提供了路由配置示例，并分享了顶部导航组件的结构和实现代码。

摘要由CSDN通过智能技术生成

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第四节：顶部导航栏组件

开发思路

【项目思路】在上一节中我们实现了底部导航栏的实现，接下来我们来完成顶部导航栏的实现。顶部导航栏存在于首页中，分为四个部分，分别是左侧直播图标、中间部分（关注、推荐）、右侧搜索图标。

布局分析

在这里插入图片描述

基础架构实现

1.功能页面的实现
根据项目需求我们可以知道，本次项目顶部只存在于首页中包含（关注、推荐）两个页面。
在这里插入图片描述
2.路由配置
由于顶部导航只存在于首页中，所以我们应该在首页中增加子路由的配置参数加载页面。
路由配置代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
   
    path: '/',
    redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏
  },
  {
   
    path: '/index',
    redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏
  },
  {
   
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
   
        path: '/index', // 首页页面路由
        name: 'index',
        component: () => import(/* webpackChunkName: "Index" */ '../views/index/Index.vue'),
        children: [
          {
   
            path: 'follows', // 关注页面路由
            name: 'follows',
            component: () => import(/* webpackChunkName: "Follows" */ '../views/follow/Follows.vue'),
            children: [
              {
   
                path: 'reVidelList', // 视频页面路由
                name: 'reVidelList',
                component: () => import(/* webpackChunkName: "reVidelList" */ '../common/components/index/VideoList.vue'),
              },
            ],
          },
          {
   
            path: 'recommend', // 推荐页面路由
            name: 'recommend',
            component: ()