I am in the process of creating a dynamic gallery where users can view and navigate through different images. Currently, I have successfully set up the functionality to display images upon user interaction.
However, I have encountered an issue while trying to navigate between images within the gallery. When attempting to move forward to the next image, nothing happens. Strangely, clicking the previous button unexpectedly returns me back to the main gallery page.
Here are the defined routes for my application:
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')
}
]
In the Photo component, which displays the selected image, the following code is implemented:
<template>
<div>
<img v-bind:src="img" alt="image" />
<br />
<button @click="previous()">Previous</button>
<button @click="next()" style="margin-left: 10px">Next</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>
The Photos component showcases all available images within the gallery, allowing users to select one as follows:
<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>Visit</button>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Photos",
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
Despite setting up navigation methods for moving between images, the functionality does not seem to be working correctly: