vue/js 监听文章的外部链接点击，跳转到中转页

在站内里面，有内容含外部链接，需要跳转到中转页的可以使用下面代码。

下面是vue3得写法。

<script setup>
const onWatchDocumentA = () => {
    document.addEventListener('click', onDocumentAClick, { once: true });
}

const onDocumentAClick = (event) => {
    if (event.target.tagName === 'A') {
        console.log('外部链接跳转：', event,event.target.href || event.target.baseURI);

        // 白名单
        let whiteListURL = [];
        let url = event.target.href || event.target.baseURI;

        if(!whiteListURL.some((item) => url.toLowerCase().includes(item))){
            // 阻止跳转 并跳转到安全提示页面
            window.open('/common/link.html?href=' + url);
            event.preventDefault();
        }
    }

    onWatchDocumentA();
}

onMounted(() => {
    onWatchDocumentA();
});

</script>

在vue中，因为有路由缓存机制。所以addEventListener监听click事件时，需要设置once为true。意思为一次性。然后在onDocumentAClick 方法中的最后加上了onWatchDocumentA方法。保证只要失效后再创建新的。避免vue的路由缓存会执行多次。