Vuetify Nuxt.js:如何在Carousels图标中添加路由链接 [英] Vuetify Nuxt.js : how to add Routing link in Carousels icon

问题描述

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

js and Vuetifiy i want to add Routing link in Carousels icon. if i press icon it should open Routing link. i tried but its not responding my link its not working below code i tried but note worked

          {
            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" }
          
        ]
      },

推荐答案

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

You need to wrap your v-img in a router-link, check the code below.

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

这篇关于Vuetify Nuxt.js:如何在Carousels图标中添加路由链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！