Vue中将带有特定标记的字符串渲染为动态组件（如router-link）的教程

<template>
  <span class="text-pre">
    <template v-for="(segment, index) in parsedCaption" :key="index">
      <component
        :is="segment.type === 'link' ? 'router-link' : 'span'"
        v-bind="segment.props"
      >
        {{ segment.content }}
      </component>
    </template>
  </span>
</template>

<script setup>
import { ref, computed } from 'vue';
// 如果 router-link 不是全局组件，你可能需要像这样导入并注册它
// import { RouterLink } from 'vue-router';

const props = defineProps({
  caption: {
    type: String,
    default: 'Lorem #ipsum dolor sit amet, #consectetur adipiscing elit, sed do #eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  }
});

// 定义用于匹配哈希标签的正则表达式
const tagRegex = /(#+[a-zA-Z0-9(_)]{1,})/g;

/**
 * 计算属性，用于解析输入的字符串，将其分割成文本和链接片段
 */
const parsedCaption = computed(() => {
  const text = props.caption || '';
  const segments = [];
  let lastIndex = 0;
  let match;

  // 循环查找所有匹配的哈希标签
  while ((match = tagRegex.exec(text)) !== null) {
    // 1. 添加当前匹配项之前的普通文本
    if (match.index > lastIndex) {
      segments.push({ type: 'text', content: text.substring(lastIndex, match.index) });
    }

    // 2. 添加哈希标签作为链接片段
    const hashtag = match[0]; // 例如：#ipsum
    const routePath = `/${hashtag.substring(1)}`; // 移除 '#' 作为路由路径，例如：/ipsum
    segments.push({
      type: 'link',
      content: hashtag,
      props: {
        to: routePath, // router-link 的 'to' 属性
        class: 'hashtag-link' // 可选：为链接添加样式类
      }
    });

    // 更新上一个匹配项的结束索引
    lastIndex = tagRegex.lastIndex;
  }

  // 3. 添加所有匹配项之后的剩余文本
  if (lastIndex < text.length) {
    segments.push({ type: 'text', content: text.substring(lastIndex) });
  }
  return segments;
});
</script>

<style scoped>
.text-pre {
  white-space: pre-wrap; /* 保留文本中的空白符和换行符 */
}

.hashtag-link {
  color: #007bff; /* 蓝色链接 */
  text-decoration: none; /* 无下划线 */
  font-weight: bold;
}

.hashtag-link:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>

<script>
import { h, defineComponent, computed } from 'vue';
import { RouterLink } from 'vue-router'; // 显式导入 RouterLink 组件

export default defineComponent({
  props: {
    caption: {
      type: String,
      default: 'Lorem #ipsum dolor sit amet, #consectetur adipiscing elit, sed do #eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  },
  setup(props) {
    const tagRegex = /(#+[a-zA-Z0-9(_)]{1,})/g;

    /**
     * 计算属性，用于解析输入的字符串，将其分割成文本和链接片段
     */
    const parsedCaption = computed(() => {
      const text = props.caption || '';
      const segments = [];
      let lastIndex = 0;
      let match;

      while ((match = tagRegex.exec(text)) !== null) {
        if (match.index > lastIndex) {
          segments.push({ type: 'text', content: text.substring(lastIndex, match.index) });
        }

        const hashtag = match[0];
        const routePath = `/${hashtag.substring(1)}`;
        segments.push({
          type: 'link',
          content: hashtag,
          props: {
            to: routePath,
            class: 'hashtag-link'
          }
        });
        lastIndex = tagRegex.lastIndex;
      }

      if (lastIndex < text.length) {
        segments.push({ type: 'text', content: text.substring(lastIndex) });
      }
      return segments;
    });

    // 返回渲染函数
    return () => h('span', { class: 'text-pre' },
      parsedCaption.value.map(segment => {
        if (segment.type === 'link') {
          // 创建 RouterLink 组件的 VNode
          // h(组件, 属性对象, 子节点)
          return h(RouterLink, segment.props, {
            default: () => segment.content // RouterLink 的内容通过 default slot 传递
          });
        } else {
          // 创建普通文本的 VNode
          return h('span', segment.content); // 或者直接返回 segment.content 作为文本 VNode
        }
      })
    );
  }
});
</script>

<style scoped>
.text-pre {
  white-space: pre-wrap;
}

.hashtag-link {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.hashtag-link:hover {
  text-decoration: underline;
}
</style>