时间戳

首页 > 解决方案 > Vue路由器中的复杂重定向

javascript - Vue路由器中的复杂重定向

问题描述

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

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

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

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

标签： javascriptregexvue-router

解决方案

我能够使用 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如果你被重定向，值保持不变，所以我最初有一个无限循环。with to => to.path.startsWith(prefix) ? '/' : prefix + to.path）

推荐阅读