VueJ - 동적 데이터로 URL 업데이트
URL에 인코딩하고 싶은 데이터 변수가 여러 개인 VueJS 앱이 있습니다.
예를 들어 루트 설정이 다음과 같은 경우(구문이 올바른지 확실하지 않습니다).
routes: [
{
path: '/:foo/:bar/:oof/:rab',
component: App
}
컴포넌트는 다음과 같습니다.
<script>
export default {
name: "App",
data: function() {
return {
foo: 1,
bar: 2,
oof: 3,
rab: 4
}
}
}
그러면 URL은http://www.example.com/#/1/2/3/4
그리고 만약foo
URL이 자동으로 갱신되는 9999로 변경됩니다.http://www.example.com/#/9999/2/3/4
또한 사용자가 URL을 변경하거나 URL 값을 데이터에 로드하여 다른 URL로 앱을 열 때 응답합니다.
나는 이것이 비교적 간단할 것이라고 생각했지만 구글 이후 나는 이것에 대한 올바른 방법에 완전히 혼란스럽다.
도움/예/솔루션 감사합니다.
값을 변경하기 위해 사용하는 것이 무엇이든 루트 푸시를 트리거해야 합니다.예를들면
methods: {
changeFoo (newFoo) {
// you can set foo but it probably won't matter because you're navigating away
this.foo = newFoo
this.$router.push(`/${newFoo}/${this.bar}/${this.oof}/${this.rab}`)
}
https://router.vuejs.org/guide/essentials/navigation.html 를 참조해 주세요.
경로 이름을 지정하면 더 쉬울 수 있습니다.
routes: [{
name: 'home',
path: '/:foo/:bar/:oof/:rab',
component: App
}]
그럼 이런 걸 쓸 수 있을 거야
this.$router.push({name: 'home', params: this.$data})
달성하려고 하는 것은 두 가지가 있는 것 같습니다만, 이상적인 운용 순서에서는 어느 쪽이 우선인지, 예를 들어 알 수 없습니다.
URL에서 값 가져오기
이것은 다음 방법으로 달성할 수 있습니다.
this.$route.params
원하는 값을 포함하는 개체입니다.를 기반으로 한 URL 설정
foo
,bar
,oof
,rab
변수사용할 수 있습니다.
this.$router.push()
실행 방법: vue-interval 문서
언급URL : https://stackoverflow.com/questions/52305892/vuejs-updating-url-with-dynamic-data
'programing' 카테고리의 다른 글
Java: 지도 기능이 있나요? (0) | 2022.07.19 |
---|---|
Vue 템플릿 vs Vue jsx (0) | 2022.07.17 |
중복되는 사용자 아이콘 생성 (0) | 2022.07.17 |
O(n) 시간과 O(1) 공간에서 중복 검색 (0) | 2022.07.17 |
"Interpolation inside attribute is removed"를 해결하려면 어떻게 해야 합니까?v-bind 또는 colon sermark를 사용하시겠습니까?"Vue.js 2 (0) | 2022.07.17 |