需求：我們需要在頁面添加一個鏈接，此鏈接為動態(tài)配置的。

之前的代碼這樣寫

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

這些寫如果url地址是 www.baidu.com。然后在本地環(huán)境會正常跳轉(zhuǎn)，發(fā)布后正式環(huán)境就會出現(xiàn)在url地址前自動加上正式環(huán)境域名，導(dǎo)致404錯誤。

修改后代碼顯示：

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

我們需要從頭查看一下：具體可查看此處W3C

<a> 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL。

href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標(biāo)識符和 JavaScript 代碼段。如果用戶選擇了 <a> 標(biāo)簽中的內(nèi)容，那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔，或者執(zhí)行 JavaScript 表達(dá)式、方法和函數(shù)的列表。

如果沒有http:\ 那么HTML中a標(biāo)簽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;
        }

這樣就解決跳轉(zhuǎn)的問題了，那么 rel="noopener noreferrer" 只要是，如果a標(biāo)簽屬性target值為_blank，那么為rel屬性添加上此值“noopener noreferrer”來防止釣魚網(wǎng)站，添加上此屬性 window.opener就不會獲取到值。安全意識問題。