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

总结起来，有两种选择：

使用完整的Vue构建渲染HTML，然后附加渲染的节点。
（首选）在HTML中找到链接，并使它们称为路由推送，而不是其默认操作。

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

1 个答案: