Cannot navigate between routes. VueJS

Question

I'm making a gallery and I've been able to show all photos like this:

When I click the button the image will be displayed to the user:

And when I'll try to go to the next image (route) it doesn't nothing! But when I click the previous button, instead go to previous image, return to the gallery

Here's my routes:

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/gallery',
    name: 'Gallery',
    component: () => import(/* webpackChunkName: "gallery" */ '../views/Gallery.vue')
  },
  {
    path: '/gallery/photo/:img',
    name: 'Photo',
    component: () => import(/* webpackChunkName: "photo" */ '../views/Photo.vue')
  }
]

And here's my Photo's component, where I show the selected image:

    <template>
  <div>
    <img v-bind:src="img" alt="imagen" />
    <br />
    <button @click="previous()">Anterior</button>
    <button @click="next()" style="margin-left: 10px">Siguiente</button>
  </div>
</template>

<script>
export default {
  name: "Photo",

  computed: {
    img: function () {
      const url = this.$route.params.img;

      return url.replaceAll("%2F", "/").replaceAll("%3F", "?");
    },
  },

  methods: {
    previous: function () {
      this.$router.go(-1);
    },

    next: function () {
      this.$router.go(1);
    },
  },
};
</script>

And here's my Photos component, where all the images are displayed and the user can choose one of them:

<template>
  <div id="gallery">
    <div id="photo" v-for="(img, index) in photos" alt="img" :key="index">
      <img v-bind:src="img" /><br />
      <router-link :to="{ name: 'Photo', params: { img: img } }">
        <button>Visitar</button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Photos",

  //https://images.unsplash.com/photo-1517694712202-14dd9538aa97%3Fixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80

  data() {
    return {
      photos: [
        "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
        "https://images.unsplash.com/photo-1590608897129-79da98d15969?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
        "https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80",
        "https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
        "https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjE3MzYxfQ&auto=format&fit=crop&w=1050&q=80",
      ],
    };
  },
};
</script>

EDIT

I have made two methods to navigate, but I think it's wrong...

Answer 1

You misunderstood the behaviour of router.go documentation link, it is used to browse the history, that's why you go back to the gallery on previous and why you can't use next.

I will suggest you to have:

• an array of your image urls
• the index of your current displayed image

If the current index is greater than zero, you will display a previous button linked to imageUrls[currentImageIndex- 1]. If the index is smaller than imagesUrls.length - 1, you will display a next button linked to imageUrls[currentImageIndex+ 1].

edit: Use <router-link> with these urls instead of @click.

Tip: when you remove or add images, you need to update the currentImageIndex

(2nd Tip: Personally, I would use vuex and would put both the array and the index of the current image in a vuex store)

Answer 2

change the following sections:

<button @click="previous()">Anterior</button>
<button @click="next()" style="margin-left: 10px">Siguiente</button>

to

<button @click="previous">Anterior</button>
<button @click="next" style="margin-left: 10px">Siguiente</button>

remove the parenthesis after the function identifiers.