首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在以"v-html“呈现的内容中使用"<nuxt-link>”?

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

Stack Overflow用户
提问于 2019-07-24 11:39:39
回答 1查看 3.8K关注 0票数 4

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

代码语言:javascript
复制
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兼容链接。

EN

回答 1

Stack Overflow用户

发布于 2019-07-31 17:39:54

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

概括起来,有两种选择:

  1. 使用完整的Vue构建呈现HTML,然后附加呈现的节点。
  2. (首选)在HTML中查找链接,并让它们调用路由器推送,而不是它们的默认操作。
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57182057

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档