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

Posted 2023-02-23

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

【英文标题】：Vuetify Nuxt.js : how to add Routing link in Carousels icon

【发布时间】：2021-01-13 01:19:14

【问题描述】：

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  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" />
              <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" 
          
        ]
      ,

【问题讨论】：

我在你的代码中看不到任何路由链接！

@Muhammad 我提到了 to="/ShoppingPage" to="/CartPage" to="/mainPage"

好吧，你在浏览器中检查元素时看到的是，它是否将 img 包裹在锚标签中。

@Muhammad 我检查了元素，但没有建立任何锚链接

用下面的代码替换你的v-img。 <router-link :to="images.to"> <v-img :src="images.src" /> </router-link>

【参考方案1】：

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

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