CODEWITHSUNDEEP
javascriptvue.jsroutesvue-router
EaBengaluru
EaBengaluru

Reputation: 71

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

Upvotes: 1

Views: 2964

Answers (3)

Luiz Avila
Luiz Avila

Reputation: 1366

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

Upvotes: 1

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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

Upvotes: 1

Tim
Tim

Reputation: 3043

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

Upvotes: 0

Related Questions