当我单击按钮时,图像将显示给用户:
当我尝试转到下一张图片(路线)时,它什么都没有!但是,当我单击上一个按钮时,转到上一个图像,然后返回画廊
这是我的路线:
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')
}
]
这是我的照片组件,在其中显示所选图像:
<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>
这是我的照片组件,其中显示所有图像,用户可以选择其中之一:
<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>
编辑
我有两种导航方法,但是我认为这是错误的...
您误解了router.go文档链接的行为,该链接用于浏览历史记录,这就是为什么您上一个返回画廊以及为什么下一个不能使用的原因。
我建议您有:
如果当前索引大于零,则将显示链接到的上一个按钮imageUrls[currentImageIndex- 1]
。如果索引小于imagesUrls.length-1,则将显示链接到的下一个按钮imageUrls[currentImageIndex+ 1]
。
编辑:使用<router-link>
这些网址而不是@click。
提示:删除或添加图像时,需要更新currentImageIndex
(第二个提示:就我个人而言,我将使用vuex并将当前图像的数组和索引都放入vuex存储中)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句