【问题标题】:How can I use a leaflet marker as nuxt-link?如何使用传单标记作为 nuxt-link?
【发布时间】:2020-06-14 19:09:46
【问题描述】:

我开始使用 nuxt 和 vue-leaflet 制作交互式地图,我对它很陌生。

地图包含不同位置的多个标记。 当用户单击标记时,应打开相应的页面。 当前打开一个包含该链接的弹出窗口。

      <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>

但我不想使用弹出窗口和链接,我希望在用户单击标记时打开链接。 遗憾的是这段代码不起作用:

      <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>

感谢您的帮助,祝您有美好的一天 :) 克里斯

【问题讨论】:

    标签: javascript vue.js leaflet vue-router nuxt.js


    【解决方案1】:

    如果您将@click 方法直接绑定到您的 l 标记并从绑定的方法打开链接怎么办?

    【讨论】:

    • 感谢工作:) 实际上你只需要使用 router.push("page2")
    猜你喜欢
    • 2019-12-12
    • 1970-01-01
    • 1970-01-01
    • 2021-09-17
    • 1970-01-01
    • 2022-11-16
    • 2020-09-10
    • 2023-04-07
    • 2015-06-28
    相关资源
    最近更新 更多