• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

166
Vistas
How to disable forward, backward button when there is no more routes in history in vue

Hi my app runs as a plugin inside another application so i have to handle forward,backward navigation manually.

My Question: i want to disable forward, backward button with .disabled class when there is no more route.

Any way i'm using history mode for going forward i'm using go(1) and for going backward i'm using go(-1)

Here are the steps to see my points:

  1. click on Browse ++ button 3 times
  2. now click on < 3 times at 3rd time it must be disabled
  3. now click on > 3 times at 3rd time it must be disabled

here is my code link

https://codesandbox.io/s/path-traversing-w6yy3f

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I want to disable forward, backward button with .disabled class when there is no more route.

Div's can't be disabled. as you have div element for both backward and forward clicks.

Hence, For now I am removing the backward and forward div from the DOM as per the condition using v-if.

Working Demo : https://codesandbox.io/s/path-traversing-forked-dq3dte

almost 3 years ago · Juan Pablo Isaza Denunciar

0

This works:

https://codesandbox.io/s/path-traversing-forked-djjbeb

unfortunately there is no way to get the current position you are on the browser history, so we need to track it somewhere.

This solution would only work however if the navigation happens trough your links, it does not work if the browser navigation is used.

EDIT

Fixed the issue with the console errors on opensandbox. The culprit was the :

 created() {
    console.log("thiss", this.$route);
  },

removing the console.log stops the log errors.

You can read and track the bug here https://github.com/codesandbox/codesandbox-client/issues/2095#issuecomment-818500869

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Probably the easiest way to do this is to store a variable referencing the current index and increment/decrement it when you navigate forward/backward.

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++;
},

Then just bind the .disabled class to currentIndex...

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda