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

【问题标题】：How can I use "<nuxt-link>" in content rendered with "v-html"?如何在使用“v-html”呈现的内容中使用“<nuxt-link>”？
【发布时间】：2019-07-24 11:39:39
【问题描述】：

我有一个用于 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 兼容链接。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

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

总结一下，有两种选择：

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

【讨论】：