Vue 路由器 - 带有模板字符串中的链接答案

【问题标题】：Vue router - with links in a template stringVue 路由器 - 带有模板字符串中的链接
【发布时间】：2018-10-24 01:24:16
【问题描述】：

我从翻译 API 导入一些文本字符串。其中一些字符串包含 HTML - 也包含链接。其中一些链接必须链接到内部路由器链接。例如some link。单击此链接当然会起作用 - 但它会重新加载应用程序，而不是在 SPA 中推送链接。

使导入/外部链接像 vue-router 链接一样的最佳方法是什么？

【问题讨论】：

您是否使用<router-link> 来呈现链接？
不，它只是一个大字符串，包含原始 html。如果我可以覆盖所有点击事件，那么我可以调用一个方法并使用 href 属性的内容，然后执行 router.push。

【解决方案1】：

基于https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html 的 Decade 答案的更复杂版本：

function onClick(event: MouseEvent) {
  let target = event.target as HTMLElement
  while (target && target.tagName !== 'A') {
    target = target.parentNode as HTMLElement
  }
  const href = (target as HTMLLinkElement).href
  if (target && target.matches("a:not([href*='://'])") && href) {
    const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event
    if (metaKey || altKey || ctrlKey || shiftKey) { return }
    if (defaultPrevented) { return }
    if (button !== undefined && button !== 0) { return }
    if (target && target.getAttribute) {
      const linkTarget = target.getAttribute('target') as string
      if (/\b_blank\b/i.test(linkTarget)) return
    }
    const url = new URL(href)
    const to = url.pathname
    if (window.location.pathname !== to && event.preventDefault) {
      event.preventDefault()
      router.push(to)
  }
}

【讨论】：

【解决方案2】：

虽然这是一个老问题，但我昨天遇到了同样的问题，可能有助于将来参考。

尝试@Decade Moon 的回答方式并没有解决我的问题，因为 window.location.origin 带有锚的 href 标签。

因此，如果我在 https://www.example.com/about 并想导航到主页，我会得到这个 URL https://www.example.com/about/https://www.example.com，这不是预期的结果。

所以我的解决方案是在我的模板字符串中传递一个数据属性：

const toHomepage = `<span data-href="/">Link to Homepage</span>`;

然后在我的组件中：

<p @click="linkTo" v-html="link"></p>

看到 v-html 指令将输出我的模板字符串。

linkTo(e) {
  if (e.target.dataset.href) {
    this.$router.push(e.target.dataset.href);
  }
}

【讨论】：

【解决方案3】：

如果您希望由 vue-router 处理点击而不是通过重新加载页面来处理，那么您确实应该使用 <router-link> 呈现链接。

否则您可以拦截点击（通过委托）并手动导航到新路由：

<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);
  }
}

【讨论】：