关于vue中a标签问题

需求：我们需要在页面添加一个链接，此链接为动态配置的。

之前的代码这样写

<a :href="url" target="_blank" rel="noopener noreferrer">{{url}}</a>

这些写如果url地址是 www.baidu.com。然后在本地环境会正常跳转，发布后正式环境就会出现在url地址前自动加上正式环境域名，导致404错误。

修改后代码显示：

<a :href="getURL(url)" target="_blank" rel="noopener noreferrer">{{url}}</a>

我们需要从头查看一下：具体可查看此处W3C

<a> 标签的 href 属性用于指定超链接目标的 URL。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

如果没有http:\ 那么HTML中a标签href中会自动补上你的域名或者项目名，因为它识别url是不完全的路径。

主要是为了确保添加

        getURL(url){
            let strURL = "";
            if(url.substr(0,7).toLowerCase() == "http://" || url.substr(0,8).toLowerCase() == "https://"){
                strURL = url;
            }else{
                strURL = "http://" + url;
            }
            return strURL;
        }

这样就解决跳转的问题了，那么 rel="noopener noreferrer" 只要是，如果a标签属性target值为_blank，那么为rel属性添加上此值“noopener noreferrer”来防止钓鱼网站，添加上此属性 window.opener就不会获取到值。安全意识问题。