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

Question

我最近使用 Amazon AWS Cognito 在我的 Vue.js 应用程序中实施了身份验证。我的身份验证工作正常，但我想清理 URL 但我一直无法弄清楚如何。

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

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

这应该清除参数和查询 (?code) 并得到你想要的:)

Answer 2

我尝试了一些东西，发现了以下作品。

我首先替换状态所以 URL 变成 http://localhost:8080/# 这样做

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

然后我使用上面提到的首选方法将 home 路由推送到它上面

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，但路由不会触发，所以我的组件不会挂载。

这似乎是实现此目的的一种 hacky 方法，这仍然让我相信我有其他配置不正确或者我正在错误地执行此过程，但目前这是有效的。

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 中 # 的情况，因此使用历史记录模式应该明确清除查询参数:)

Answer 4

这对我有用。

注意：在 history 模式下使用 Vue 3 组合 API。

import { useRoute, useRouter } from 'vue-router'

// put this inside your setup() function:

const route = useRoute()
const router = useRouter()

if (route.query.username = 'test') {
  // do stuff...
  
  // clear the query
  router.replace({ query: {} })      
}

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

How do I update the path in URL to remove a parameter?

vue.js

vue-router