Hola, mi aplicación se ejecuta como un complemento dentro de otra aplicación, por lo que tengo que manejar la navegación forward,backward manualmente.
Mi pregunta: quiero deshabilitar el botón de forward y backward con la clase .disabled cuando no haya más rutas.
De cualquier manera, estoy usando el modo de historial para avanzar, estoy usando go(1) y para retroceder, estoy usando go(-1)
Estos son los pasos para ver mis puntos:
Browse ++ 3 veces< 3 veces en la tercera vez debe estar deshabilitado> 3 veces en la tercera vez que debe estar deshabilitadoaquí está mi enlace de código
Quiero deshabilitar el botón de avance y retroceso con la clase .disabled cuando no haya más rutas.
Los div no se pueden deshabilitar. ya que tiene un elemento div para los clics hacia atrás y hacia adelante.
Por lo tanto, por ahora estoy eliminando el div hacia backward y hacia forward del DOM según la condición usando v-if .
Demostración de trabajo : https://codesandbox.io/s/path-traversing-forked-dq3dte
Esto funciona:
https://codesandbox.io/s/path-traversing-forked-djjbeb
desafortunadamente, no hay forma de obtener la posición actual en la que se encuentra en el historial del navegador, por lo que debemos rastrearlo en alguna parte.
Sin embargo, esta solución solo funcionaría si la navegación se realiza a través de sus enlaces, no funciona si se utiliza la navegación del navegador.
EDITAR
Se solucionó el problema con los errores de la consola en opensandbox. El culpable fue el:
created() { console.log("thiss", this.$route); },la eliminación de console.log detiene los errores de registro.
Puede leer y rastrear el error aquí https://github.com/codesandbox/codesandbox-client/issues/2095#issuecomment-818500869
Probablemente la forma más fácil de hacer esto es almacenar una variable que haga referencia al índice actual e incrementarla/disminuirla cuando navegue hacia adelante/hacia atrás.
backward() { currentIndex--; this.$router.go(-1); }, forward() { currentIndex++; this.$router.go(1); }, browse() { const param = this.getRandomTraversingObject(); this.$router.push({ name: "traverse", params: param }); console.log(this.$router, this.$router.history.length); currentIndex++; }, Luego simplemente vincula la clase .disabled a currentIndex...