Question

我正在从API中获取一些信息，然后将其绘制在地图上。我希望能够在弹出窗口内部生成动态<router-link>（而不是像下面的代码那样使用<a>标签）。这可能吗？

    const results = await axios.get('https://some-api.herokuapp.com/unique-facilities')
    results.data.results.forEach(result => {
      const marker = L.marker([result._id.lat, result._id.lon], { icon: this.icon }).addTo(this.map)
      marker.bindPopup(`
        <strong>Facility:</strong> ${result._id.facility_name}
        <br />
        <strong>Parent Co:</strong> ${result._id.parent_co ? result._id.parent_co : 'NA'}
        <br />
        <strong>Address:</strong> ${result._id.number} ${result._id.street}
        <br />
        <strong>City:</strong> ${result._id.city}
        <br />
        <strong>State:</strong> ${result._id.state}
        <br />
        <a href='/facility-name/${result._id.facility_name}'>Get details about this facility</a>
      `)
    })

Answer 1

快速解决方案：

1）在main.js文件中，确保您具有以下几行：

import Vue from 'vue';
window.Vue = Vue;
import router from './router.js';
Vue.router = router;

因此您可以通过window.Vue.router方式访问路由器。

2）现在，您可以生成链接，其行为类似于router-link组件。

marker.bindPopup(`
    <a
      href="/facility-name/${result._id.facility_name}"
      target="_self"
      onclick="event.preventDefault(); Vue.router.push('/facility-name/${result._id.facility_name}');
    >Get details about this facility</a>
`)

如何在Leaflet标记弹出窗口内添加Vue路由器链接

1 个答案:

快速解决方案：