Vue3 implementa la función de menú dinámico

Directorio de artículos

  • 0. Demostración de efectos
  • 1. Construya un proyecto Vue3
    • 1.1 Crear proyecto Vue3 con andamios vite
    • 1.2 Establecer alias de archivo
    • 1.3 Instalar y configurar element-plus
    • 1.4 Instalar y configurar el enrutamiento
  • 2. Página de inicio de sesión
  • 3.Página de administración de backend
    • 3.1 Construir el marco de fondo
    • 3.2 Barra de menú izquierda
    • 3.3 información del usuario del encabezado
    • 3.4 Contenido principal
    • 3,5 pies
  • 4. Configurar el enrutamiento estático
  • 5. Menú de activación de grabación
    • 5.1 el-menu vincula el atributo activo predeterminado
    • 5.2 Agregar evento de clic al menú
    • 5.3 Inicializar menú de activación
  • 6. Enrutamiento dinámico
    • 6.1 Inicio de sesión exitoso y almacenamiento de datos
    • 6.2 El guardia de navegación de ruta configura rutas dinámicamente
    • 6.3 Resuelva el problema de la página en blanco después de actualizar la página
  • 7. Código completo

Pasos principales:
Insertar descripción de la imagen aquí

0. Demostración de efectos

Insertar descripción de la imagen aquí

1. Construya un proyecto Vue3

1.1 Crear proyecto Vue3 con andamios vite

npm create vite@latest vue3-zhifou -- --template vue

Ingrese el editor de código en la carpeta del proyecto que acaba de crear.

#安装依赖
 npm

Supongo que te gusta

Origin blog.csdn.net/bjzhang75/article/details/142642749
Recomendado
Clasificación