Vuetify Nuxt.js：如何在轮播图标中添加路由链接

Question

js 和 Vuetfiy 我想在 Carousels 图标中添加路由链接。如果我按图标，它应该打开路由链接。 我试过但它没有响应我的链接它不起作用 我尝试了以下代码，但注释有效

          {
            images: [
              { src: "/image1.png", caption: "Shopping-Page", to:"/ShoppingPage"},
              { src: "/image2.png", caption: "Cart-Page", to:"/CartPage" },
              { src: "/image3.png", caption: "main-Page", to:"/mainPage" }
              
            ]
          },

我的路由器在我想添加的路由器链接下面链接了这个

 to="/ShoppingPage" 

 to="/CartPage" 

 to="/mainPage"

我的页面视图像这样锁定

我的代码

<template>
  <v-layout style="width: auto;" class="ma-auto">
    <v-carousel cycle light height="309" hide-delimiter-background show-arrows-on-hover>
      <v-carousel-item v-for="(slide, i) in slides" :key="i">
        <v-row>
          <v-col cols="3" v-for="(images, j) in slide.images" :key="j">
            <div class="d-flex flex-column justify-center align-center">
              <v-img :src="images.src" width="30"/>
              <span class="mx-auto text-center caption">{{ images.caption }}</span>
            </div>
          </v-col>
        </v-row>
      </v-carousel-item>
    </v-carousel>
  </v-layout>
</template>

<script>
export default {
  name: "playground",
  data: () => ({
    slides: [
      {
        images: [
          { src: "/image1.png", caption: "Shopping-Page"},
          { src: "/image2.png", caption: "Cart-Page" },
          { src: "/image3.png", caption: "main-Page" }
          
        ]
      },

Answer 1

您需要将v-img 包装在router-link 中，请检查以下代码。

<router-link :to="images.to">
  <v-img :src="images.src" />
</router-link>