一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

动态渲染导航

路由方式：哈西路由

在router.ts文件中，创建路由时改为哈西路由。

const router = createRouter({
  // 路由模式
  history: createWebHashHistory(),
  routes,
})

复制代码

hash

vue中的使用方式

createWebHashHistory()
复制代码

了解一下

hash路由就是带 # 号的，和css中的 #一个意思。hash也称为锚点，用于页面定位使用，可以使对应 id 的元素显示在可视区域内(如回到顶部)。

history

history的出现就是为了完善hash的一些不足。

vue中的使用方式

createWebHistory()
复制代码

优点

hash路由原本用于锚点，但是现在用它来导航，锚点就没法使用了。
hash基于url传参，会有体积限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

更改router文件

import AppLayout from '@/layout/AppLayout.vue'
import { RouterView } from 'vue-router'
const manageRouter =  // 管理端
{
  path:'/manage',
  component : AppLayout,
  children:[
    {
      path:'/',
      name:'home',
      component:RouterView,
      meta: { title: '首页', icon: 'Fold' },
    },
    {
      path:'/user',
      name:'用户管理',
      component:RouterView,
      children:[
        {
          path:'blacklist',
          name:'黑名单管理',
          component:()=>import('@/manage/UserManage/BlackList/BlackList.vue'),
        }
      ]  
    },
    { 
        path:'/dashboard',
        name:'数据看板',
        component:RouterView,
        children:[
          {
            path:'pv',
            name:'浏览量',
            component:()=>import('@/manage/DashBoard/PV/PV.vue'),
          }
        ]  
      
    }
  ]
}
export default manageRouter
复制代码

1. RouterView：

如下图，用户管理这种导航没有对应的页面。所以我们可以使用RouterView，作为他的component值。

2. 二级菜单：

注意，二级菜单的path不使用 /。上面引用的组件没有的话，可以随便新建两个。我们现在只是为了看效果。

<template>
 Pv
</template>
<script lang="ts" setup >

</script>
<style scoped lang="scss">

</style>

复制代码

一级菜单

将manageRouter引入

将我们的manageRouter引入之前写好的，AppMenu组件中，作为遍历需要的数据。

import manageRouter from '@/router/manageRouter'
复制代码

遍历第一次数据

首先在 <template>中遍历，因为我们区分管理端和客户端所以在外面有一层 /manage，而我们，导航栏的内容都是其children中的内容。所以遍历的是 manageRouter.children

<el-menu
    :collapse="props.isCollapse"
    :collapse-transition="false"
    @open="handleOpen"
    @close="handleClose"
    background-color="#ebf1f5"
    text-color="#606266"
    active-text-color="#2F74FF"
    :unique-opened="true"
    class="menu"
    @select="handleSelect"
    :default-active='selectKey'
    router
  >
   <template v-for="(first,index) in manageRouter.children">

     </template> 

  </el-menu>
复制代码

不同的一级导航栏

如下图，home和用户管理虽然都是一级导航栏，但是二者并不相同。home对应页面，用户管理则只用于展开子菜单。


   <template v-for="(first,index) in manageRouter.children">
      <el-sub-menu :index="first.path" v-if="first.children" :key="index" >
       
      </el-sub-menu>  
      <el-menu-item v-else :index="first.path" :key="'item'+index">   
              <span>{{first.name}}</span>
      </el-menu-item>  
     </template> 

复制代码

这里用v-if 和 v-else 通过判断 first.children是否为空来区分导航。

el-menu-item用于home这种没有子菜单的，el-sub-menu 用于有子菜单的。

3. 注意 :index 对应的是跳转的路径。

二级菜单

     <el-sub-menu :index="first.path" v-if="first.children" :key="index" >
        <template  v-if="first.children">
            <el-menu-item-group v-for="(second,sec_index) in first.children"  :key="sec_index"> 
            <!--这个:index需要将上级菜单的路由组合一起-->
                <el-menu-item :index="first.path+'/'+second.path"><i class="el-icon-odometer" />              
                    {{second.name}}
                  </el-menu-item>
          </el-menu-item-group>
          </template>
            <template #title>
              <span>{{first.name}}</span>
            </template>
      </el-sub-menu>  
复制代码

区分

用户管理和黑名单管理都在 el-sub-menu中，也是需要判断区分一下的。用户管理就直接展示标题名称。而黑名单管理，就需要再遍历。

选中背景色

添加样式

.menu .el-menu-item:hover {
    background-color:#FFFFFF80;
}
.menu .el-menu-item.is-active{
  background-color: #FFFFFF80!important;
  color: #2f74ff !important;
}
复制代码

图标的使用

因为图标也是遍历出来的，我试了好几种方式。如下这种方式是可以的。

将图标挂载到全局

main.ts

路由文件中添加

在路由文件中添加 meta对象，存放图标。

这个HomeFilled对应着官方文档图标的名称

渲染图标

 <el-icon><component :is="first.meta.icon"/></el-icon>
复制代码

vue3 + elemenplus实现导航栏[3]