Vue 路由器在传单弹出窗口中无法正常工作

Question

我在我的代码库中使用vue2-leaflet包装器将 Leaflet 和 Vue 放在一起。 目前，我遇到了一个问题，我试图让 Vue $router在 Leaflet 的弹出窗口中工作。 经过我的尝试，这就是我的代码现在的样子。

<template>
  <l-map>
    <l-tile-layer :url="url" />
    <l-marker
      v-for="point in points"
      :key="point.id"
      :lat-lng="point.latLng"
      :icon="point.icon"
    >
      <l-popup :content="displayInfo(point)"/>
    </l-marker>
  </l-map>
</template>
<script>
...
    displayInfo(point) {
      // how it usually works: this.$router.push({ name: 'point', params: { id: point.id } })
     
      // Attempt 1
      // return '<div onclick="routeToPage(' + point.id + ')">' + point.id + '</div><br/>' + point.subject

      // Attempt 2
      // return '<div @click="routeToPage(' + point.id + ')">' + point.id + '</div><br/>' + point.subject

      // Attempt 3
      // return '<router-link to="{ name: \'point\', params: { id: ' + point.id + ' } }">' + point.id + '</router-link><br/>' + point.subject;

      return point.id + '<br/>' + point.subject;
    },

    routeToPage(id) {
      return this.$router.push({ name: 'point', params: { id }
    }

...
</script>

尝试 1单击弹出窗口中的 id 会出现此错误。

(index):1 Uncaught ReferenceError: routeToReport is not defined
    at HTMLDivElement.onclick

尝试 2单击 id 什么也不做，也没有行为。 它看起来好像只是普通文本。 在检查时它只显示

<div class="leaflet-popup-content" style="width: 301px;">
    <div @click="routeToPage">39105</div><br>
    Aliquid voluptas animi facilis ipsum ducimus doloremque consequatur nemo porro perferendis atque dolorum quo adipisci perferendis magnam
</div>

尝试 3

<div class="leaflet-popup-content" style="width: 301px;">
    <router-link to="{ name: 'point', params: { id: 39105 } }">39105</router-link><br>
    Aliquid voluptas animi facilis ipsum ducimus doloremque consequatur nemo porro perferendis atque dolorum quo adipisci perferendis magnam
</div>

这些似乎都没有从文本中创建链接，甚至没有将其注册为路线。 关于我做错了什么的任何想法？

如果您需要更多信息，或者这不是对我的问题的清晰描述，请告诉我。

Answer 1

您可能应该像这样放置弹出窗口的内容：

<l-popup>
  <div @click= ....> </div>
</l-popup>

这样带有@click的 div 将被 vue 解释为模板。 如果你把它放在:content ，它只是被认为是文本。