VueJS中如何避免:href绑定的链接与当前URL自动拼接的问题

你遇到的域名拼接行为不是Vue导致的，是浏览器的默认规则：没有带协议头（http/https）的URL会被识别为相对路径，浏览器会自动将其和当前页面的域名拼接后跳转。

下面几种方案都优于硬编码https://前缀，可根据你的项目场景选择：

• 方案1：新增计算属性做协议判断，避免重复添加前缀
  适配存储的URL可能已带协议、或部分是http协议的场景，不会出现https://https://xxx.com的错误拼接，代码示例如下：

  <template>
    <div :key="link.id">
      <a 
        :href="fullUrl"
        target="_blank"
      >
        {{link.title}}
      </a>
    </div>
  </template>
  
  <script>
  export default {
    name: "Link",
    props: ["link"],
    computed: {
      fullUrl() {
        // 先判断当前URL是否已经带协议
        if (/^https?:\/\//.test(this.link.url)) {
          return this.link.url
        }
        // 没有协议统一补全https前缀
        return `https://${this.link.url}`
      }
    }
  };
  </script>
  

• 方案2：封装为全局公共能力
  如果多个组件都需要处理链接跳转逻辑，可将上述判断逻辑封装为全局挂载的工具方法，或者Vue自定义指令，所有组件直接调用即可，不用重复编写逻辑。
• 方案3：数据源层面统一处理
  在后端新增/录入URL时，统一校验格式补全协议头后再存入数据库，前端直接绑定link.url即可，不需要额外做前端兼容处理。

内容的提问来源于stack exchange，提问作者Valentin Massart