Как добавить Vue router-link внутри всплывающего маркера Leaflet

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

A Быстрое решение:

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