vue3 + elementplus implementa la barra de navegación [3]

¡Acostúmbrate a escribir juntos! Este es el décimo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

Navegación renderizada dinámicamente

Método de enrutamiento: enrutamiento Hassi

En el archivo router.ts, al crear la ruta, cambie a la ruta hash.

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

复制代码

picadillo

Cómo usar en vue

createWebHashHistory()
复制代码

Aprender acerca

El enrutamiento hash está marcado con #, lo que significa lo mismo que # en CSS. Hash, también conocido como punto de anclaje, se usa para el posicionamiento de la página, lo que puede hacer que el elemento correspondiente a la identificación se muestre en el área visible (como volver a la parte superior).

historia

La aparición de la historia es mejorar algunas de las deficiencias de hachís.

Cómo usar en vue

createWebHistory()
复制代码

ventaja

• La ruta hash se usó originalmente para las anclas, pero ahora que se usa para la navegación, las anclas no se pueden usar.
• Hash se basa en los parámetros de transmisión de URL, que tendrán un límite de volumen, y el modo de historial no solo puede colocar parámetros en la URL, sino también almacenar datos en un objeto específico.

cambiar el archivo del enrutador

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. Vista del enrutador:

Como se muestra en la figura a continuación, no existe una página correspondiente para la gestión de usuarios de dicha navegación. Entonces podemos usar RouterView como su valor de componente.

2. Menú secundario:

Tenga en cuenta que la ruta del menú secundario no se utiliza /. Si los componentes mencionados anteriormente no existen, puede crear dos nuevos. Ahora solo estamos para ver el efecto.

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

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

</style>

复制代码

Un menú

Introducir ManageRouter

Introduzca nuestro manageRouter en el componente AppMenu previamente escrito como los datos necesarios para el recorrido.

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

Iterar sobre los primeros datos

<template>Primero atraviese, porque distinguimos entre el lado de administración y el lado del cliente, hay una capa fuera /manage, y nosotros, el contenido de la barra de navegación es el contenido de sus elementos secundarios. Entonces atravesar esmanageRouter.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>
复制代码

Diferentes barras de navegación principales

1.

Como se muestra en la siguiente figura, aunque tanto la gestión de inicio como la de usuarios son barras de navegación de primer nivel, no son lo mismo. La página de inicio corresponde a la página, y la administración de usuarios solo se usa para expandir el submenú.

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

Aquí, v-if y v-else se utilizan para distinguir la navegación al juzgar first.childrensi está vacía.

el-menu-item se usa para inicio sin submenús, y el-sub-menu se usa para submenús.

3. Tenga en cuenta que :indexcorresponde a la ruta de salto.

Menú secundario

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

distinguir

La gestión de usuarios y la gestión de listas negras están ambas el-sub-menuen , y también es necesario juzgar y distinguir. La gestión de usuarios muestra directamente el nombre del título. Y la gestión de la lista negra, debe atravesar nuevamente.

seleccionar color de fondo

añadir estilo

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

Uso de iconos

Debido a que el ícono también se atraviesa, probé varias formas. La siguiente manera es posible.

Monte el icono en el global

main.ts

archivo de ruta añadido

Agregue un metaobjeto al archivo de enrutamiento para almacenar el icono.

Este HomeFilled corresponde al nombre del icono del documento oficial

icono de procesamiento

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