vue3 v-for new URL打包Failed to construct 'URL': Invalid URL

在Vue 3中使用 `v-for` 指令时遇到 `new URL` 构造函数抛出 "Invalid URL" 错误的问题，通常是因为在迭代过程中提供的 URL 字符串不符合 `URL` 构造函数所要求的格式。为了确保 URL 的正确性，你应该检查：

1. 是否有拼写错误。
2. 是否缺少协议头，比如 `http://` 或 `https://`。
3. 是否有特殊字符没有被适当地编码。

如果你正在动态创建 URL，并且需要从一个可能不完全符合 `URL` 构造函数要求的字符串中构建 URL，你应该确保在创建 `URL` 对象之前对这些值进行适当的检查和格式化。

以下是一个例子，展示如何在 Vue 3 中使用 `v-for` 正确处理 URL 字符串，以避免构造函数错误：

<template>
  <div>
    <ul>
      <li v-for="urlString in urlStrings" :key="urlString">
        <a :href="new URL(urlString).href">{{ urlString }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 确保每个URL字符串都包含协议头，且没有其他无效字符
      urlStrings: [
        'https://example.com/page',
        'http://another-example.com',
        // 可能的无效 URL 字符串示例
        // 'example.com', // 缺少协议头
        // 'www.example.com/page', // 缺少协议头
        // 'https://example.com page', // 空格字符应该被编码或移除
      ],
    };
  },
};
</script>

在上面的例子中，`urlStrings` 数组包含了可能用在 `v-for` 循环中的 URL 字符串。在模板中，我们使用 `new URL(urlString).href` 来确保每个字符串都是有效的 URL。如果某个字符串不符合要求，它将不会被转换为链接，但也不会抛出错误。