How can I use a leaflet marker as nuxt-link?

Question

I started to use nuxt and vue-leaflet for an interactive map and i am very new to it.

The Map contains multiple Markers for different Locations. When the user clicks on a marker the respective page should open. Currently a popup opens which contains the link.

      <l-marker
        v-for="(location, index) in allLocations"
        :key="index"
        :lat-lng="location.latlng"
      >
        <l-popup>
          <nuxt-link :to="getLink(location)">{{
            location.characterName
          }}</nuxt-link>
        </l-popup>
      </l-marker>

but i don't want to use a popup and than the link, I want the link to open when the user clicks on the marker. Sadly this code doesn't work:

      <nuxt-link
        v-for="(location, index) in allLocations"
        :key="index"
        :to="getLink(location)"
        v-slot="{ href, navigate }"
      >
        <l-marker :lat-lng="location.latlng" :href="href" @click="navigate">
        </l-marker>
      </nuxt-link>

Thanks for any helps and have a good day :) Chris

Answer 1

如果您将 @click 方法直接绑定到您的 l-marker 并从绑定的方法打开链接怎么办？