1. 原理介紹

出現(xiàn)原因就是使用了a標(biāo)簽

去掉a標(biāo)簽的href屬性后，瀏覽器左下角鏈接的hover效果消失

個(gè)人建議不要使用a標(biāo)簽，但是有的組件是使用a標(biāo)簽實(shí)現(xiàn)的，建議避免使用，直接以js方法進(jìn)行跳轉(zhuǎn)即可

react 可以直接 location.href跳轉(zhuǎn)或umi的history(history.push()等)方法跳轉(zhuǎn)

vue 使用router的方法進(jìn)行跳轉(zhuǎn)（router.push() || router.replace()等）

以下代碼不影響之前的a標(biāo)簽點(diǎn)擊事件

如果后續(xù)有以代碼形式添加的a標(biāo)簽且需要剔除連接功能，需重新調(diào)用 resetA 函數(shù)

代碼實(shí)現(xiàn)

const resetA = () => {[...document.getElementsByTagName('a')].forEach((el, i) => {el.setAttribute('lh-href', el.href)el.removeAttribute('href')});document.addEventListener('click', (e) => {if (e.target.tagName.toLowerCase() === 'a') {const url = [...e.target?.attributes].find(item => item.nodeName === 'lh-href')?.nodeValue || undefined;url ? location.href = url : null;}})}

原生調(diào)用

(resetA())()

vue調(diào)用

直接這樣調(diào)用vue會(huì)有個(gè)刷新的情況，建議對(duì)document的監(jiān)聽事件做個(gè)跳轉(zhuǎn)處理

2.x使用this.$router.push()或replace方法去替換，3.x引入router使用2.x的方法去替換

this.$nextTice(() => resetA())

react調(diào)用

useEffect(()=> resetA(), [])

總結(jié)

以上是生活随笔為你收集整理的移除浏览器左下角的链接的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。