如何在使用 "v-html" 呈现的内容中使用"<nuxt-link>"？

Question

我有一个用于Nuxt的实用程序插件.js我用一种方法创建了它来解析主题标签和提及并用<nuxt-link>替换它们。然后，我使用 v-html 将转换后的数据注入回模板。我的问题是<nuxt-link>没有用 v-html 解析。

import Vue from 'vue';
Vue.mixin({
  methods: {
    replaceMentions(data) {
      // Tags
      const tagRegEx = /[#tag:[a-zA-Z0-9_-]*]/g;
      let tagMatch;
      while ((tagMatch = tagRegEx.exec(data)) !== null) {
        const tag = Array.from(tagMatch[0].matchAll(/[#tag:(.*?)]/g));
        data = data.replace(tag[0][0], '<nuxt-link to="/search?q=' + tag[0][1] + '">#' + tag[0][1] + '</a>');
      };
      // Users
      const userRegEx = /[@user:[a-zA-Z0-9_-]*]/g;
      let userMatch;
      while ((userMatch = userRegEx.exec(data)) !== null) {
        const user = Array.from(userMatch[0].matchAll(/[@user:(.*?)]/g));
        data = data.replace(user[0][0], '<nuxt-link to="/users/' + user[0][1] + '">@' + user[0][1] + '</>');
      };
      return data;
    }
  }
});

有没有人有任何提示，告诉我如何使这些作为适当的nuxt兼容链接工作？我已经尝试使用<a>并且它工作正常，我只是更喜欢使用适当的nuxt兼容链接。

Answer 1

我认为这里的讨论基本上回答了这个问题：https://github.com/nuxt-community/modules/issues/185

总而言之，有两个选项：

1. 使用完整的 Vue 构建渲染 HTML，然后附加渲染的节点。
2. (首选(在 HTML 中找到链接，并使它们调用路由器推送而不是默认操作。