5.vue3项目（五）：实现顶部导航栏功能：导航栏静态搭建，菜单折叠功能实现，面包屑动态展示路径，刷新页面功能，全屏功能

目录

一、左侧菜单栏刷新，不要合并菜单

二、顶部tabbar静态搭建

1.新建文件

2.编辑页面

3.结果测试

三、菜单折叠效果的实现

1.给顶部导航的组件添加导出

2.新建一个组件小仓库

3.新建一个全局变量属性

4.面包屑点击的情况下图标变更

5.layout父组件中实现折叠的效果

6.解决一级菜单图标消失的bug

7.效果测试

四、顶部面包屑动态展示路径

1.编辑路由内容

2.编辑面包屑组件

五、刷新业务的实现

1.小仓库新增一个属性用于监听是否点击刷新按钮

2.点击右上角刷新按钮触发修改小仓库属性

3.main组件监听到点击时间后先销毁内容再重新渲染实现刷新

4.测试结果

六、 全屏功能

七、 感谢支持

---

一、左侧菜单栏刷新，不要合并菜单

我们如果在二级菜单，一旦刷新页面整个菜单就合并了，这不好。我们想要刷新后还在那个菜单栏：

<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <Logo></Logo>
      <!-- 展示菜单 -->
      <!-- 滚动组件 -->
      <el-scrollbar class="scrollbar">
        <!-- 菜单组件 -->
        <el-menu :default-active="$router.path" background-color="#001529" text-color="white">
          <!-- 根据路由动态生成菜单 -->
          <Menu :menuList="userStore.menuRoutes"></Menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- 顶部导航 --