vue.js - 如何在使用 ""呈现的内容中使用 "v-html"？

Question

我有一个用于 Nuxt.js 的实用程序插件，我使用一种方法创建了它来解析主题标签和提及并将它们替换为 <nuxt-link> .然后我正在使用 v-html将转换后的数据注入(inject)模板。我的问题是 <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 中找到链接并让它们调用路由器推送而不是它们的默认操作。