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

js和Vuetifiy我想在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" }
          
        ]
      },