Vue escribe navegación en el pie de página, haga clic en cuál para cambiar el color y el salto de ruta (el papel de enrutador-enlace-activo).
Como se muestra en la figura anterior, se crean 4 opciones de salto de ruta.
Cuando cambio las cuatro opciones de ruta de "Casa", "Lala", "Descubrir" y "Mi", el texto y el icono cambian de negro a rojo.
La siguiente imagen muestra el diseño (html):
router-link: donde tag = 'div' significa que el router-link es una etiqueta div
CSS:
router-link-active es un atributo autónomo de vue, que representa el estado cuando el router -el enlace está activado y seleccionado, que se puede realizar Cambiar para cambiar de color .
¡Lo anterior completa el requisito de esta función! Es muy simple.
Pero la comprensión de router-link-active no es muy profunda, no importa, hablemos de su función en detalle a continuación:
El componente admite la navegación del usuario (clic) en la aplicación con función de enrutamiento.
Especifique la dirección de destino a través del atributo to, que se representará como una etiqueta con el enlace correcto de forma predeterminada.
Puede generar otras etiquetas configurando el atributo de etiqueta.
Además, cuando la ruta de destino se activa con éxito, el elemento de enlace establece automáticamente un nombre de clase CSS que indica la activación, que es router-link-active, y podemos agregar color o fondo a la etiqueta a cuando se hace clic en la etiqueta a
Si cree que el nombre router-link-active es demasiado largo, puede usar main.js,
let router = new VueRouter ({
enrutador-enlace-activo: 'activo'
})
Redirección de enrutamiento: después de completar todas las
configuraciones anteriores, básicamente ha terminado, pero debido a que la ruta raíz se establece como se muestra en la figura siguiente, la
ruta del índice no se puede activar de esta manera, por lo que solo ingresar la ruta raíz no hace que el Red de navegación "home", por lo que aquí es necesario Usar redirección de enrutamiento (redireccionamiento).
Redirija la ruta de la ruta raíz, como se muestra en la siguiente figura: Si se le
dirige a la ruta / index, puede activar correctamente la ruta de la página de inicio y hacer que la navegación de la "página de inicio" sea roja.
