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

Question

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

当我添加模式：'history'时，新的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（）中的path设置为“ / path1”，并将replace设置为true。为我工作。