无法在路线之间导航。VueJS

ÁlvaroPérezDíaz

我正在制作一个画廊,并且已经能够显示所有这样的照片:画廊

当我单击按钮时,图像将显示给用户:

个人形象

当我尝试转到下一张图片(路线)时,它什么都没有!但是,当我单击上一个按钮时,转到上一个图像,然后返回画廊

这是我的路线:

  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>

编辑

我有两种导航方法,但是我认为这是错误的...

方法

带有路由器链接的模板

devdgehog

您误解了router.go文档链接的行为,该链接用于浏览历史记录,这就是为什么您上一个返回画廊以及为什么下一个不能使用的原因。

我建议您有:

  • 您的图片网址数组
  • 当前显示图像的索引

如果当前索引大于零,则将显示链接到的上一个按钮imageUrls[currentImageIndex- 1]如果索引小于imagesUrls.length-1,则将显示链接到的下一个按钮imageUrls[currentImageIndex+ 1]

编辑:使用<router-link>这些网址而不是@click。

提示:删除或添加图像时,需要更新currentImageIndex

(第二个提示:就我个人而言,我将使用vuex并将当前图像的数组和索引都放入vuex存储中)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

Vuejs:路线变更事件

来自分类Dev

在路线之间传递参数

来自分类Dev

在页面之间导航时JavaScript无法执行

来自分类Dev

Aurelia:如何在子路线之间导航

来自分类Dev

组件导航路线

来自分类Dev

无法匹配任何路线

来自分类Dev

在包含相同组件的路线之间导航时,做出反应的最佳方式,这是处理获取的最佳方式

来自分类Dev

如何导航到同级路线?

来自分类Dev

无法匹配任何路线:“”

来自分类Dev

VUE路线-无法呈现嵌套路线

来自分类Dev

即使遵循了“反应导航”文档,“反应导航”也无法在屏幕之间导航

来自分类Dev

快递-无法导入路线

来自分类Dev

无法导航到嵌套路线,但浏览器网址已更新

来自分类Dev

无法在反应导航5的屏幕之间导航

来自分类Dev

Angular 9路线儿童无法使用导航

来自分类Dev

如何在子路线之间固定和导航?

来自分类Dev

想要导航到页面时无法匹配任何路线

来自分类Dev

在路线之间共享代码

来自分类Dev

在路线之间保持$ scope的模式

来自分类Dev

在路线之间交换文件

来自分类Dev

无法生成路线

来自分类Dev

为什么从一条路线导航到另一条路线时,AngularJS服务无法定义?

来自分类Dev

反应路由器:无法导航路线

来自分类Dev

多个标记之间的路线

来自分类Dev

子路线之间的导航

来自分类Dev

在解析数据之前,角度路线不会导航到路线

来自分类Dev

VueJS - 应用程序无法定位路线

来自分类Dev

VueJS 路由/导航问题

来自分类Dev

无法获得特定路线