概述
如Gitee等网站，在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。
效果
实现
1. 实现思路
将打开链接作为参数传递给一个中间页面，在页面加载的时候判断链接的域名和当前网站是否同域，同域则直接跳转，如果不同域，则展示确认页面进行在此确认。如下为跳转页面。
http://localhost:3001/#/link?target=https://www.baidu.com2. 实现代码
<template> <div class="layout-main"> <div class="layout-box"> <p>即将跳转到外部网站</p> <p>您将要访问的链接不属于{{ local }}，请关注您的账号安全。</p> <p>{{ target }}</p> <p> <el-button type="warning" @click="goto">继续前往</el-button> </p> </div> </div> </template><script>
export default {
computed: {
isSameDomain() {
const host = this.local
const targetHost = new URL(this.target).host
return host === targetHost
},
target() {
return this.$route.query.target
},
local() {
return window.location.host
}
},
created() {
if(this.isSameDomain) window.location.href = this.target
},
methods: {
goto() {
window.location.href = this.target
}
}
}
</script><style lang="scss" scoped>
$size: 38rem;
.layout-main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
font-size: 1.2rem;
background: #efefef;
padding: 0 calc(50% - $size / 2);
h3 {
width: $size;
text-align: center;
font-size: 1.8rem;
margin: 0.5rem 0;
}
.layout-box {
background-color: #ffffff;
width: $size;
border-radius: 0.4rem;
box-shadow: 0.1rem 0.1rem 0.4rem #ccc;
padding: 1.5rem;
p {
margin: 0;
line-height:2;
&:first-child {
font-size: 1.5rem;
margin-bottom: 1rem;
line-height: 1;
}
&:last-child {
text-align: right;
}
}
}
}
</style>
``
