매개 변수를 제거하기 위해 URL의 경로를 업데이트하는 방법

매개 변수를 제거하기 위해 URL의 경로를 업데이트하는 방법

나는 최근에 아마존 AWS Cognito를 사용하여 Vue.js 응용 프로그램에 인증을 구현했다.인증이 제대로 작동하고 있지만 URL을 정리하려고 하는데 방법을 알아내지 못했어.

내가 Cognito로 인증하면 나는 JSON 웹 토큰을 얻는 데 사용되는 코드를 받는다.이것은 내 URL을 이렇게 보이게 한다.

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

토큰을 가져와서 디코딩하면 다음 코드를 사용하여 사용자를 내 애플리케이션 홈 페이지로 리디렉션함

this.$router.push('home')

이렇게 되면 이렇게 생긴 URL이 생기는데 이렇게 생긴 URL을 갖게 된다.

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

URL에서 ?code 파트를 제거하여

http://localhost:8080/#/home

나는 사용해 보았다.this.$router.replace('home')하지만 그게 고쳐지진 않아

부에루터를 이용해서 이걸 할 수 있는 방법은 없을까?

이것은 내 코드의 전체 인증 섹션이다.

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

너의 경우 사용할 수 있을지 모르겠지만 사용할 수 있는 옵션이 있어.mode: 'history'HTML5 기록 모드를 사용하도록 vue 라우터에서(예: 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, 따라서 기록 모드를 사용하면 쿼리 매개 변수를 확실히 지울 수 있다 :)

을 밀고 나가려 하다.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)를 지우고 원하는 것을 얻을 수 있다. :)

몇 가지 시도를 해보니 다음과 같은 작품들이 나왔다.

나는 먼저 URL이 될 수 있도록 상태를 교체한다.http://localhost:8080/#이러면서

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

그런 다음 위에서 참조한 선호 방법을 사용하여 홈 루트를 그 루트로 밀어 넣는다.

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

이것은 나를 흥분시킨다.http://localhost:8080/#/home올바른 경로, 내 홈 구성 요소 로드 및 페이지가 새로 고쳐지지 않았으므로 Vuex 상태는 그대로 유지된다.

다음 작업을 수행하려고 하면:

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

이렇게 하면 URL이 다음으로 올바르게 업데이트됨http://localhost:8080/#/home하지만 노선은 발사되지 않아 내 컴포넌트는 올라가지 않아

이것은 이것을 성취하기 위한 진부한 방법인 것 같은데, 그것은 여전히 내가 잘못 구성된 무언가를 가지고 있거나 이 과정을 잘못하고 있다고 믿게 하지만, 당분간은 이것이 효과가 있다.

이것은 나에게 효과가 있었다.

3: Vue 3 회사historyComposition 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: https://stackoverflow.com/questions/54427828/how-do-i-update-the-path-in-url-to-remove-a-parameter