Question

我最近使用Amazon AWS Cognito在Vue.js应用程序中实现了身份验证。我的身份验证工作正常，但是我想清理URL，但无法弄清楚该怎么做。

当我通过Cognito进行身份验证时，我会收到一个用于获取JSON Web令牌的代码。这使我的网址看起来像这样

http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4

一旦获得令牌并对其进行解码，然后使用带有vue-router的以下代码将用户重定向到应用程序的首页

this.$router.push('home')

这可行，但是我最终得到一个看起来像这样的URL

http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4#/home

我想从URL中删除？code部分，而只需

http://localhost:8080/#/home

我尝试使用this.$router.replace('home')，但不能解决问题。

是否可以使用vue-router做到这一点？

这是我代码的完整身份验证部分

mounted () {
  const qs = queryString.parse(window.location.search)
  this.code = (qs && qs.code)

  if (this.code) {
    this.GET_TOKEN(this.code)
      .then(() => {
        this.$router.push('home')
      })
  } else {
    this.LOG_IN()
  }
}

Answer 1

尝试使用object而不是literal进行推送（如文档中所述：https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort）

例如：

this.$router.push({ path: 'home' })

...或更推荐的传递路线名称而不是路径的方式：

this.$router.push({ name: <your-route-name> })

这应该清除参数并进行查询（？代码）并获得您想要的内容：）

Answer 2

我尝试了几件事，发现了以下作品。

我首先替换状态，以使URL变为http://localhost:8080/#

window.history.replaceState({}, document.title, window.location.origin + '/#')

然后，我使用上面引用的首选方法将本地路由推上去

this.$router.push({ path: 'home' })

这使我http://localhost:8080/#/home可以正确路由，加载我的Home组件，并且由于页面从未刷新，所以我的Vuex状态仍然保持不变。

如果我尝试执行以下操作：

window.history.replaceState({}, document.title, window.location.origin + '/#/home')

这会将URL正确更新为http://localhost:8080/#/home，但路由不会触发，因此无法安装我的组件。

这似乎是一种拙劣的方式来完成此任务，这仍然使我相信我配置了其他错误的东西，或者我没有正确地执行此过程，但是暂时可以正常工作。

Answer 3

我不确定您是否可以使用它，但例如，可以选择在vue路由器中使用mode: 'history'来启用HTML5历史记录模式（https://router.vuejs.org/guide/essentials/history-mode.html）。

const router = new VueRouter({
  mode: 'history',
  ...
})

这将解决URL #中带有http://localhost:8080/?code=7a1d074c-0d39-4da3-a291-b618b69019d4#/home的情况，因此使用历史记录模式应该可以清除查询参数：）

如何更新URL中的路径以删除参数？

3 个答案: