VueJ - 동적 데이터로 URL 업데이트

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

그리고 만약fooURL이 자동으로 갱신되는 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