Vue Router - 在现有应用程序中更改为历史模式并处理旧书签

Question

我有一个应用程序在 vue 路由器设置中没有使用“历史”模式。所以所有现有的 URL 都有一个“/#/”。示例 - ~/#/login 或 ~/#/page1

当我添加模式：“历史”时，新的 url 效果很好。 但是，如果我尝试使用仍然带有“#”的旧书签，路由将失败。

我必须使用 router.replace 来去掉“#”还是有更好的方法？

我查看了许多解决方案，但没有一个（我检查过）谈论我正在为现有应用程序切换到“历史”模式的场景

Answer 1

在我的情况下，所有新页面都是在设置历史模式后引入的（条件&& to.name !== 'newPage' 非常适合我的情况），所以对我有用的解决方案是

router.beforeEach((to, from, next) => {
  const redirectPath = to.hash.split('#')[1]
  if (to.hash && to.name !== 'newPage') {
    next({
      path: redirectPath,
      hash: '',
      replace: true
    })
  }

...
return next()
}

在这种情况下，如果我使用我的旧书签（比如 ~/#/page1），to.hash 会保存值 '#/page1'，所以我所做的就是将哈希拆分为 ["", "/page1 "] 然后将 next() 中的路径设置为 '/path1' 并将替换设置为 true。对我有用。