javascript - 无法在路线之间导航。VueJS

Question

我正在制作一个画廊，我已经能够展示这样的所有照片：

当我单击按钮时，图像将显示给用户：

当我尝试转到下一个图像（路线）时，它什么都不是！但是当我单击上一个按钮时，而不是转到上一个图像，返回画廊

这是我的路线：

  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>

编辑

我做了两种导航方法，但我认为它是错误的......

标签： javascriptvue.jsvue-router

Answer 1

更改以下部分：

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

到

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

删除函数标识符后的括号。