vue路由器中的复杂重定向

Question

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

我想添加一条类似如下的路由：

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

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

Answer 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)