如何在 VitePress 构建的网站中实现“安全链接”或“跳转中间页”跳转效果
如何在 VitePress 中实现这种“安全链接”或“跳转中间页”（例如 ygjc.cc/go?id=mitce 跳转到真实的mitce机场vpn的推广链接），最适合的方法是使用
Vue 组件进行客户端重定向 。 由于我的网站 一个机场推荐网 部署在 Cloudflare Pages 上，经常有推广链接需要添加到网站里，这种静态页面的客户端跳转非常快且成本为零。 以下是实现步骤，我们将创建一个专门的跳转页面（例如 /go ），然后通过 URL 参数来控制跳转目标。 请照着以下步骤进行设置。 步骤 1：建立链接映射文件 (数据库) 为了方便管理，不要把链接散落在代码里。我们创建一个专门的文件来存放所有的推广链接。 我用 VSCode 软件在本地仓库的 .vitepress 目录下新建一个文件夹 data ，然后将以下代码放在新建 links.ts 文件里 ： TypeScript // .vitepress/data/links.ts
// 这里定义你的短链 ID 和对应的真实推广链接
export const linkMap: Record<string, string> = {
// 格式: 'ID': '真实URL'
'mitce': 'https://mitce.net/aff.php?aff=11434',
'糖果云': 'https://candytally.cyou/web/#/login?code=TkS1YnZa', '雪山机场': 'https://x2.xueshan.shop/#/register?code=J9ETa4E2', // 添加更多...
}
步骤 2：创建跳转组件 我们需要一个 Vue 组件来读取 URL 里的参数，并执行跳转。 在 .vitepress/theme/components/ 下新建 Redirect.vue ： 代码段 <script setup>
import { onMounted, ref } from 'vue'
import { linkMap } from '../../data/links' // 引入刚才的数据文件
const st…
