从外部网站跳转至Vue项目vue-router指定路由组件的问题咨询

核心原因 #

• 路径匹配规则不满足：你跳转的目标路径是#/payments（复数拼写、末尾无斜杠），但目标站点配置的路由路径为/payment/（单数拼写、末尾带斜杠），两者完全不匹配。vue-router无法命中对应路由规则时，就会加载默认路由组件。
• 可选排查点：如果修正拼写后仍有问题，检查目标站点vue-router的mode配置：若配置为history模式，#开头的hash路径不会被识别为路由路径，仅会被当做页面锚点处理。

解决方法 #

方案1：对齐跳转地址和现有路由配置 #

直接修改跳转代码的目标地址，和已有的路由规则保持一致：

<script>
    window.location.href = "http://localhost/#/payment/";
</script>

方案2：对齐路由配置和现有跳转地址 #

修改目标站点的路由规则，匹配你当前的跳转路径：

export default function paymentRoutes() {
    return [
        {
            path: "/payments", // 修改为复数拼写、去掉末尾斜杠，和跳转路径匹配
            name: "PaymentSuccess",
            component: PaymentSuccess
        }
    ]
}

其他适配方案 #

如果目标站点使用的是history模式路由，跳转时不需要加#，直接跳转http://localhost/payments即可，同时注意需要后端配置history模式的兜底规则，避免直接访问时返回404。

排查优化 #

可以给路由增加404兜底规则，后续遇到路径不匹配问题时可以快速定位：

const routes = [
    ...paymentRoutes(),
    // 兜底规则需放在所有路由的最后
    {
        path: '*',
        component: NotFoundComponent // 替换为你自定义的404组件
    }
]

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