Vue router - со ссылками в шаблонной строке

Question

Я импортирую некоторые текстовые строки из API перевода.Некоторые из этих строк содержат HTML - также ссылки.Некоторые из этих ссылок должны ссылаться на внутренние ссылки маршрутизатора.Например какая-то ссылка .Щелчок по этой ссылке, конечно, будет работать, но он перезагружает приложение, вместо того, чтобы нажимать ссылку в SPA.

Какой лучший способ заставить импортированные / внешние ссылки действовать как ссылки vue-router?

Answer 1

Вам действительно следует отображать ссылки с помощью <router-link>, если вы хотите, чтобы клики обрабатывались vue-router, а не путем перезагрузки страницы.

В противном случае вы можете перехватитьщелкает (через делегирование) и перемещается к новому маршруту вручную:

<div @click="onClick">
  <!-- Render the HTML in here -->
  <a href="/foo/bar">Link</a>
</div>

onClick(e) {
  if (e.target.tagName === 'A') {
    e.preventDefault();

    // Manually navigate to the route
    this.$router.push(e.target.href);
  }
}