Vue3: Vue3의 URL에 매개변수를 추가하지 않고 경로에 매개변수를 보내는 방법은 무엇입니까?

Question

Vue3에서는 URL에 값을 표시하지 않고 경로에 속성을 전달하는 방법이 있나요?

저는 경로를 다음과 같이 정의합니다:

으아악

저는 이 경로를

이라고 부릅니다. 으아악

경로를 path: '/someRoute/:message',으로 변경하면 메시지는 잘 전달되는데 URL에는 표시하지 않고 메시지만 전달되길 바랄 뿐입니다.

이 접근 방식을 사용하는 몇 가지 Vue2 예제를 보았지만(예: https://stackoverflow.com/a/50507329/1572330) Vue3에서는 더 이상 작동하지 않는 것 같습니다.

또한 Vue3 문서의 모든 예제(https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js/https://v3.router.vuejs.org/) Guide/essentials/passing-props.html) URL 자체를 통해 값을 전달하므로 여전히 가능한지 확실하지 않습니다.

이에 대한 어떤 생각이라도 도움이 될 것입니다.

Answer 1

마침내 변경 로그에서 관련 콘텐츠를 찾았습니다: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

URL에 속성을 표시하지 않고 매개변수를 통해 속성을 보내는 것은 더 이상 불가능합니다. 하지만 다행히도 그들은 몇 가지 대안을 제안했습니다. 내 경우에 가장 효과가 있었던 것은 state: { ... } 대신

을 사용하는 것이었습니다. 으아아아

이제 페이지 코드에서 history.sate의 속성을 읽고 해당 값을 필요한 속성에 넣습니다.

URL/경로 자체가 변경되지 않으면 업데이트 후크가 있어야 하며 force: true

을 사용해야 합니다. 으아아아

PS history.state 몇 가지 제한 사항이 있으므로 다른 경우에는 변경 로그의 다른 제안 중 하나가 더 나을 수도 있습니다