基于pure-admin-thin的vue目录修改，左侧一级目录顶部二级目录

本人在进行修改此类代码中发现网上都是顶部一级目录左侧二级目录的，没有自己想要的左侧一级目录顶部二级目录的，基本上只是位置的问题，但是我使用的是pure-admin-thin这个架构，此架构的两部分里面的内容是分开的，扒完代码之后我来说一下我的理解和操作。

一、代码结构

如上图，架构的结构是主要在layout这个文件里面设置的，其中layout里面的index.vue里面含有一级目录、页面主体的，算是直接渲染页面。

对比此架构作者写的三种架构、左侧模式、顶部模式、混合模式（一级目录在顶部二级目录在左边），对应文件来讲一下。

1.vertical.vue文件分别是左侧模式的所有目录（可展开二级目录的结构）、混合模式的二级目录。因为内容不同所以这个页面中渲染路由内容的时候，是读取了其他页面传来的路由数据进行渲染，而不是直接读取外层路由。（此页面只渲染目录而不渲染目录名称）

2.horizontal.vue文件，这个文件仅仅是表示顶部模式的，所以读取的路由是直接读取并渲染一级目录。

3.mixNav.vue文件，这个文件仅仅是混合模式的一级目录，读取的路由也是直接读取并渲染的。

4.navbar.vue文件，这个文件是用来通过选择的模式不同来渲染不同的页面的。里面的topcollapse是左侧目录点击折叠的功能，breadcrumb是面包屑、mixNav就是混合模式的一级目录。

5.sidebarItem.vue文件，此文件是渲染目录标题的，架构作者还是通过判断已选择的模式来进行分别渲染，渲染的内容分为一级目录下是但孩子还是多孩子，并分别进行渲染，这部分的比较复杂，并且也分了渲染的目录位置，这部分比较复杂。如果想找到自己想找的渲染内容，在{{}}旁边添加一个标记即可找到。

其余的vue基本都是带有目录结构的某些功能。

二、实现过程

左侧一级目录顶部二级目录基本就是原生的代码中的混合模式，将两个内容调换后的结果，但是对于这个结构的代码来说，不能直接调换，我做了如下修改，以左侧模式为基础进行修改。

1.在navbar.vue中设置左侧借助混合模式的一级目录的文件mixnav，复制并添加相应的模块位置，我复制的名称是mixnavs。

        <mixNav v-if="layout === 'mix'" />

    <mixNavs v-if="layout === 'vertical'" />

2.在复制好的mixnavs文件中渲染的标签中替换vertical的渲染内容

    <el-menu

        router

        unique-opened

        mode="vertical"

        class="outer-most select-none"

        :collapse="isCollapse"

        :default-active="defaultActive"

        :collapse-transition="false"

        @open="handleMenuOpen"

    >

      <el-menu-item

          v-for="routes in menuData"

          :key="routes.path"

          :item="routes"

          style="float: left;"

          :index="resolvePath(routes) || routes.redirect"

         

          class="outer-most select-none"

      >

        <template #title>

          <div :style="getDivStyle">

            <span class="select-none" >

              {{ routes.meta.title}}

            </span>

            <extraIcon :extraIcon="routes.meta.extraIcon" />

          </div>

        </template>

      </el-menu-item>

    </el-menu>

修改的函数也直接加进来。

3.对于左侧的代码vartical，将遍历的内容修改成对于一级目录的。

<sidebar-item

          v-for="routes in usePermissionStoreHook().wholeMenus"

          :key="routes.path"

         

          :item="routes"

         

          :base-path="routes.path"

          class="outer-most select-none"

        >

4.添加 @click.prevent="handleLink(routes)"点击事件，这个点击事件是在面包屑文件中找到的路由跳转，所以我把它放进mixnavs文件中

 <span class="select-none"  @click.prevent="handleLink(routes)">

              {{ routes.meta.title}}

            </span>

这样就实现了左侧一级目录顶部二级目录啦。

ps:会出现一个小bug就是左侧的目录还是会显示二级目录，并且直接点击二级目录会报错，但是不影响使用。