Vitepress路由跳转异常：上一路径段被追加至下一路由的修复方案

问题概述 #

在Vitepress 1.0.0-alpha.40项目中，点击侧边栏不同分组的链接时，路由会错误追加上级页面的路径段，导致跳转地址不符合预期。

项目配置与目录结构 #

配置文件（.vitepress/config.ts） #

import { defineConfig } from 'vitepress'

export default defineConfig({
    base: './',
    outDir: '../dist',
    themeConfig: {
        sidebar: [
            {
                text: 'Configuration',
                collapsible: true,
                items: [
                    {
                        text: 'Foo',
                        link: '/configuration/foo'
                    }
                ]
            },
            {
                text: 'Deployment',
                collapsible: true,
                items: [
                    {
                        text: 'Bar',
                        link: '/deployment/bar'
                    }
                ]
            }
        ]
    }
})

目录结构 #

.
└── docs
    ├── .vitepress
    │   └── config.ts
    ├── configuration
    │   └── foo.md
    ├── deployment
    │    └── bar.md
    └── index.md

报错现象 #

• 初始访问http://localhost:5173/时，点击Foo链接，路由正常跳转至：

  http://localhost:5173/configuration/foo.html

• 在Foo页面点击Bar链接，路由错误跳转至：

  http://localhost:5173/configuration/deployment/bar.html

• 预期正确路径：

  http://localhost:5173/deployment/bar.html

原因与修复方案 #

问题原因 #

当base配置为相对路径./时，Vitepress会将以/开头的侧边栏link解析为相对当前页面的路径，而非站点根目录路径。因此在/configuration/foo.html页面点击/deployment/bar时，会自动追加当前页面的路径段，形成错误地址。

修复方案（二选一） #

方案1：将base改为绝对路径（适用于部署在域名根目录场景）

修改配置中的base为绝对路径/：

export default defineConfig({
    base: '/', // 改为绝对路径
    outDir: '../dist',
    // ... 其他配置不变
})

此时所有以/开头的link都会指向站点根目录下的对应路径，跳转行为恢复正常。

方案2：保持base为相对路径，修改侧边栏link为相对根目录的写法

去掉侧边栏link开头的/，使用相对站点根目录的路径：

themeConfig: {
    sidebar: [
        {
            text: 'Configuration',
            collapsible: true,
            items: [
                {
                    text: 'Foo',
                    link: 'configuration/foo' // 去掉开头的/
                }
            ]
        },
        {
            text: 'Deployment',
            collapsible: true,
            items: [
                {
                    text: 'Bar',
                    link: 'deployment/bar' // 去掉开头的/
                }
            ]
        }
    ]
}

这种写法在相对路径base下会被正确解析为站点根目录的对应文件路径。

内容的提问来源于stack exchange，提问作者baitendbidz