Блог

Я использую Vue 3 (без TS) и маршрутизатор Vue 4.

У меня есть некоторая уценка , которую я получаю от своего API, с помощью которой я анализирую markdown-it , а затем передаю компоненту через v-html директиву. Сам синтаксический анализ работает нормально, все отображается так, как должно, но если у меня есть <a> тег , указывающий на маршрут внутри приложения, очевидно, что он обрабатывается неправильно <router-link> , поэтому он вызывает обновление страницы, чего я, очевидно, хотел бы избежать.

Есть ли у меня способ обрабатывать внутренние ссылки и v-html отображать их через router-link , чтобы они правильно перемещались, как это должно быть?

Мой компонент предельно прост

 <template>
  <div>
    <h1>{{ title }}</h1>
    <span v-html="content"></span>
  </div>
</template>

<script>
  import { parseMarkdown } from "../../helpers/markdownParser";

  export default {
    name: "BlogPost",
    data() {
      return {
        slug: undefined,
        title: null,
        content: null,
      };
    },
    async beforeCreate() {
      this.slug = this.$route.params.slug;

      await this.$axios.get(`/posts/${this.slug}`).then((response) => {
        const data = response.data[0];

        this.title = data.title;
        this.content = parseMarkdown(data.content);
      });
    },
  };
</script>
 

parseMarkdown Вспомогательный метод просто вызывает markdown-it и возвращает проанализированную уценку в виде строки.

markdownParser.js

 import MarkdownIt from "markdown-it";

export const parseMarkdown = (html) => {
  return markdown.render(html);
};
 

В качестве альтернативы, есть ли другой способ, кроме v-html как для меня, чтобы получить проанализированную уценку на странице?

ПРАВКА: Чтобы уточнить, от чего я получаю ответ parseMarkdown() .

Пример уценки:

 # Example File

This is an **example** of what `markdown-it` does with the file.

[Links work](https://example.com), too. Though [internal links](/example) don't work quite as expected.

    ```html
    <p>We can also have codeblocks in our markdown</p>
    ```
 

Что markdown-it возвращает

 <h1>Example File</h1>

<p>This is an <strong>example</strong> of what <code>markdown-it</code> does with the file.</p>

<p><a href="https://example.com">Links work</a>, too. Though <a href="/example">internal links</a> don't work quite as expected.</p>

<pre><code class="lang-html">
  amp;<pamp;>
    We can also have codeblocks in our markdown
  amp;</pamp;>
</code></pre>