$syslog.replace()는 브라우저 쿼리 문자열을 업데이트하지 않습니다.

$syslog.replace()는 브라우저 쿼리 문자열을 업데이트하지 않습니다.

문제는 쿼리 문자열이 브라우저의 URL 표시줄에 표시되지 않는다는 것입니다.

이 코드는 제품 구성을 추적하기 위해 쿼리 문자열을 업데이트합니다.

두 가지 방법이 있습니다. 첫 번째 방법은 모형을 선택하고 두 번째 방법은 해당 모형에 대한 옵션을 설정합니다.다음은 코드입니다(쿼리 문자열 값은 현재 자리 표시자임).

방법:

chooseModel (option) {
  this.$router.replace({
    path: this.$route.path,
    query: {m: 'model'},
  })
},
choose (option) {
  if (!this.selectedModel) return
  let opt = {}
  opt[option] = option
  this.$router.push({          // I've tried push and replace
    path: this.$route.path,
    query: Object.assign(this.$route.query, opt),
  })
},

계산:

selectedModel () {
  return this.$route.query.m
},

언제chooseModel는 브라우저에 표시되는 쿼리 스트링을 호출합니다.http://localhost:8080/custom/?m=model하지만 언제?choose를 호출하면 브라우저에 표시되는 쿼리 문자열은 그대로 유지됩니다.

WWIW, 코드를 변경했습니다.chooseModel여러 쿼리 문자열 값을 설정하면 모두 표시됩니다.문제의 원인이 되는 값을 변경하려고 하는 것 같습니다.

디버거를 사용하면 다음 내용을 볼 수 있습니다.$route.query정답입니다. 쿼리에 대한 변경 내용이 반영됩니다.

Firefox와 Chrome 모두 동일한 동작을 보였기 때문에 브라우저 고유의 동작은 아닌 것 같습니다.

업데이트된 쿼리 문자열을 브라우저에 표시하려면 어떻게 해야 합니까?

이건 내 벌레지만 그래도 이상한 행동이야.

루트는 불변하기 때문에 Object.assign()수정할 수 없습니다.이상한 점은 쿼리 문자열을 수정하려고 하면 브라우저에 값이 표시되지 않아도 새로운 루트 객체에 설정하려고 했던 값이 표시된다는 것입니다.

수정은 간단합니다.루트 오브젝트를 수정하지 마십시오.

query: Object.assign({}, this.$route.query, opt)

(새로운 링크 위치에 대해 VCavallo에 감사)

언급URL : https://stackoverflow.com/questions/43428761/router-replace-doesnt-update-browser-query-string