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

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

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