日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在Vue3中，封裝一個router-links，支持內(nèi)外鏈接都能跳轉(zhuǎn)！

標(biāo)簽是用于在Vue應(yīng)用程序的不同頁面之間跳轉(zhuǎn)，但它不是跳轉(zhuǎn)到外部鏈接，相反，我們一般使用 標(biāo)簽。

也許只有我這么認(rèn)為，但很多時候，我無法跟上這種差異。其他時候，鏈接可能是動態(tài)的，即來自數(shù)據(jù)庫或用戶提供的某個數(shù)據(jù)源。在這種情況下，你根本不知道鏈接是外部的還是內(nèi)部的，在每個可能使用鏈接的地方手動做一個v-if是多么痛苦。

如果只用一個組件來處理所有內(nèi)部和外部的鏈接，那不是很好嗎?

幸運(yùn)的是，擴(kuò)展組件非常簡單，只需將它包裝到我們自己的定制組件中。Ok，我們需要構(gòu)建一個AppLink組件來處理鏈接，無論是外部的還是內(nèi)部的。

AppLink組件

AppLink組件的 props 要包含 router-link 的所有 props。為什么?因為這樣我們組件的“接口”就可以模仿 Router Link 的接口，無需再記住另一個API。我們可以通過從Vue Router導(dǎo)入 RouterLink 并將其 props 解構(gòu)到我們的組件中，如下所示：

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

在 template 中，創(chuàng)建 router-link 并將 props 傳遞給它，我們還需要傳入slot ，這個可以在 router-link 插入內(nèi)容。

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

到目前為止，我們已經(jīng)處理了所有內(nèi)部鏈接，那外部鏈接呢?如前所述，外部鏈接使用a標(biāo)簽，因此我們將其添加到template中。像 router link 一樣，并將傳入的 to 值賦值給 href。

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

這樣內(nèi)部和外部鏈接都有了對應(yīng)的處理，需要注意的是，以上內(nèi)容僅適用于 Vue3，因為它包含多個根元素。

現(xiàn)在，我們需要一個計算屬性來告訴AppLink使用哪種鏈接，我們先取名為isExternal。

首先，我們檢查prop的值是否為字符串。這是必需的，因為to屬性可能是一個對象，例如有時傳遞到router-link(即：:to="{name:'RouteNameHere'}")。然后，我們將查字符串是否以http字符串開頭。如果這兩個條件都成立，那么就判斷是一個外部鏈接。

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

有了 isExternal計算屬性之后，我們就可以使用 v-if 來進(jìn)行操作，如下所示：

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

大功告成，我們可以這樣來使用 AppLink 組件。

 
 
 
 
    
  
  
  
  
  1. // Anywhere in your app 
    2. 
  
  
  
  
  2. Click Me 
    3.

更高的靈活性

在新窗口中打開

我們可以多添加一些常用的功能。例如，我們希望外部鏈接都在新窗口中打開，這樣很簡單就能做到了，只要把 target="_blank" 添加到我們的 a 標(biāo)簽中即可。

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

當(dāng)然，有些外部鏈接不需要在新窗口中打開，我們可以通過指定 target 來告訴組件內(nèi)部打開鏈接的方式，如下所示：

 
 
 
 
    
  
  
  
  
  1. Vue School 
    2.

鏈接安全

當(dāng)我們使用target="_blank"屬性鏈接到另一個站點上的頁面時，最終可能使我們的站點面臨性能和安全性問題：

  • 鏈接到的頁面最終可以在與頁面相同的進(jìn)程上運(yùn)行。根據(jù)所鏈接頁面的最新情況，這可能會使您自己的頁面變慢。
  • 另一個頁面也可以通過window.opener屬性訪問原始頁面窗口，從而引起安全隱患。

解決此問題的方法是為所有外部鏈接標(biāo)簽添加rel="noopener"屬性，因為我們已經(jīng)封裝成組件了，所以只需要在組件內(nèi)部的 a 標(biāo)簽添加即可。

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2.  
    3.

外部鏈接的獨(dú)特樣式

我見過一些網(wǎng)站在他們的網(wǎng)站上設(shè)置的外部鏈接樣式與在他們自己的網(wǎng)站上指向站內(nèi)的鏈接有點不同。這可以幫助用戶更好地理解他們要跳轉(zhuǎn)的是外部鏈接。

這個樣式可以是任何東西，如，在第三方鏈接加個警告的圖標(biāo)，告訴用戶跳轉(zhuǎn)的風(fēng)險。在我們的組件中實現(xiàn)這一點非常簡單，只需在模板中的a標(biāo)簽中添加一個external-link類，然后使用css對其進(jìn)行不同的樣式化：

 
 
 
 
    
  
  
  
  
  1. // AppLink.vue 
    2. 
  
  
  
  
  2. // (must have font awesome font included in project) 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. .external-link i { 
    7. 
  
  
  
  
  7.   font-size: 0.8em; 
    8. 
  
  
  
  
  8.   opacity: 0.7; 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11.

這里就把 AppLink 思路講完了，當(dāng)然，大家需要新的需求可以自行擴(kuò)展。

~完，我是小智，下期見!

作者：Written by Daniel Kelly

譯者：前端小智 來源：vueschoolhttps://vueschol.io/articles/vuejs-tutorials/extendig-vue-router-links-in-vue-3/


當(dāng)前名稱：在Vue3中，封裝一個router-links，支持內(nèi)外鏈接都能跳轉(zhuǎn)！
分享鏈接：http://www.dlmjj.cn/article/cddesjs.html