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

what error do you see on console

DevCl9
– DevCl9

2020-10-21 10:01:11 +00:00
Commented Oct 21, 2020 at 10:01 — DevCl9
– DevCl9, Commented Oct 21, 2020 at 10:01
@DevCl9 I haven't no mistake in console...

Álvaro
– Álvaro

2020-10-21 10:17:29 +00:00
Commented Oct 21, 2020 at 10:17 — Álvaro
– Álvaro, Commented Oct 21, 2020 at 10:17

devdgehog · Accepted Answer · 2020-10-21 11:07:05Z

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)

edited Oct 21, 2020 at 11:07

answered Oct 21, 2020 at 10:44

devdgehog

6353 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Álvaro Over a year ago

So... If I have in vuex (state) an array with those image's urls I will be able to pass by url parameter the index and if it's greater or smaller I display the specific button?

devdgehog Over a year ago

Vuex is not compulsory, it is just a nice tool to avoid passing props around. I forgot to add a detail on this answer, I edited it.

Álvaro Over a year ago

But if I use router-link... How I 'redirect' to the route. I mean... I think I should use router.push(imageUrls[currentImageIndex- 1 | +1]) to navigate

devdgehog Over a year ago

You don't need all these troubles, you are making it harder for yourself. I advise you to read the vue-router documentation and/or check examples. The simplest solution would be to use the /gallery/photo/ inside the :to prop of your router [and optionaly an id or an uuid from your data source (db or server) part if not a SPA]. You don't need to pass the image url as you have its url from images[currentId], you only need to change the currentId. The initial question was (more than) answered: router.go navigate the history, editing it to solve other problems is not fair.

DevCl9 · Accepted Answer · 2020-10-21 10:03:08Z

1

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.

answered Oct 21, 2020 at 10:03

DevCl9

3081 silver badge9 bronze badges

Collectives™ on Stack Overflow

Cannot navigate between routes. VueJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related