vue3 + elemenplus implements navigation bar [3]

Get into the habit of writing together! This is the 10th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Dynamically rendered navigation

Routing method: Hassi routing

In the router.ts file, when creating the route, change to the hash route.

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

复制代码

hash

How to use in vue

createWebHashHistory()
复制代码

Learn about

Hash routing is marked with #, which means the same as # in CSS. Hash, also known as anchor point, is used for page positioning, which can make the element corresponding to the id display in the visible area (such as back to the top).

history

The emergence of history is to improve some of the shortcomings of hash.

How to use in vue

createWebHistory()
复制代码

advantage

• The hash route was originally used for anchors, but now that it is used for navigation, the anchors cannot be used.
• Hash is based on url transmission parameters, which will have a volume limit, and the history mode can not only put parameters in the url, but also store data in a specific object.

change router file

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：

As shown in the figure below, there is no corresponding page for user management such navigation. So we can use RouterView as his component value.

2. Secondary menu:

Note that the path of the secondary menu is not used /. If the components referenced above do not exist, you can create two new ones. We are now just to see the effect.

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

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

</style>

复制代码

A menu

Introduce manageRouter

Introduce our manageRouter into the previously written AppMenu component as the data needed for traversal.

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

Iterate over the first data

<template>First traverse in , because we distinguish between the management side and the client side, so there is a layer outside /manage, and we, the content of the navigation bar is the content of its children. So traversing ismanageRouter.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>
复制代码

Different primary navigation bars

1.

As shown in the figure below, although both home and user management are first-level navigation bars, they are not the same. The home page corresponds to the page, and the user management is only used to expand the submenu.

   <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> 

复制代码

2.

Here, v-if and v-else are used to distinguish navigation by judging first.childrenwhether it is empty.

el-menu-item is used for home without submenus, and el-sub-menu is used for submenus.

3. Note that :indexit corresponds to the jumping path.

Secondary menu

     <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>  
复制代码

distinguish

User management and blacklist management are both el-sub-menuin , and it is also necessary to judge and distinguish. User management directly displays the title name. And blacklist management, you need to traverse again.

select background color

add style

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

Use of icons

Because the icon is also traversed, I tried several ways. The following way is possible.

Mount the icon to the global

main.ts

route file added

Add a meta object to the routing file to store the icon.

This HomeFilled corresponds to the name of the official document icon

render icon

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