Vue路由器中的复杂重定向答案

【问题标题】：Complex redirect in vue routerVue路由器中的复杂重定向
【发布时间】：2019-06-28 20:09:57
【问题描述】：

我在多页应用程序上使用 vue-router；我们正在添加历史模式，因为我们的要求坚持我们的 url 不包含特殊字符 (#)，并希望从我们的前端代码中确保我们总是在我们的客户端路由前面加上 /v/。（以避免不得不在整个应用程序中更新我们所有的路线，并集中此功能）。

我想添加类似以下的路线：

routes: [
    // add `v/` to paths that don't start with `v/`
    { 
      path: `(^\/(?!v))*`, 
      redirect: to => `/v/${to}` 
    },
]

基于在path-to-regexp 中使用正则表达式，但我从他们的文档中并不完全清楚如何正确地将整个路由作为正则表达式传递（或者可能吗？），尤其是在不陷入重定向循环的情况下。

【问题讨论】：

标签： javascript regex vue-router

【解决方案1】：

我能够使用 2 个重定向来实现我所需要的（在这种情况下，回退到 '/' 作为一种 404。

// Fallback to baseRoute for prefixed unmatched routes
{ path: `${prefix}/*`, redirect: '/' },
// Fallback to baseRoute for unprefixed, unmatched routes (try again with prefix)
{ path: `*`, redirect: to => prefix + to.path }

（一个有趣的问题是，在重定向函数中，如果你被重定向，to 的值保持不变，所以我最初有一个无限循环。to => to.path.startsWith(prefix) ? '/' : prefix + to.path）

【讨论】：