페이지 새로 고침 시 Quasar 탭 패널의 현재 탭을 유지하는 방법

페이지 새로 고침 시 Quasar 탭 패널의 현재 탭을 유지하는 방법

Vue.js 2 애플리케이션을 작업 중인데 페이지 새로 고침/재로드를 제대로 처리하는 데 어려움을 겪고 있습니다.세 가지 문제가 있습니다.

• 현재 경로 손실
• 라우터 매개 변수 손실
• QTabPanel 구성 요소에서 선택한 탭이 손실됨

두 번째 문제는 Vuex 스토어에 라우터 파라미터를 저장하여 해결했지만, 나머지 두 가지는 어떻게 해결해야 할지 모르겠습니다.선택한 퀘이사 탭을 Vuex에 저장할 생각도 했지만, 일부 구성 요소에는 여러 수준의 중첩된 탭 패널이 있다는 사실을 감안하면 귀찮을 수 있습니다.또한 새로 고친 후에도 응용프로그램을 현재 경로에 유지하는 방법을 모르겠습니다(이력 모드를 사용하고 있습니다).누군가 저에게 힌트를 주실 수 있나요?

일반적으로 현재 위치에 있는 탭을 나타내는 쿼리 매개 변수를 경로에 추가해야 합니다.그런 다음 탭을 변경할 때 탭을 업데이트한 다음 값에 따라 페이지의 탭을 변경합니다.

이미 Quasar를 사용하고 있기 때문에 QRouteTabs는 이 작업을 상당히 많이 수행합니다(https://quasar.dev/vue-components/tab#qroutetab-api).

이와 같은 것:

<q-tabs v-model="tab" >
   <q-route-tab :to="{query: { tab: 1 }}" name="tab1" label="Tab 1" />
   <q-route-tab :to="{query: { tab: 2 }}" name="tab2" label="Tab 2" />
</q-tabs>

언급URL : https://stackoverflow.com/questions/72424161/how-to-keep-quasar-tab-panels-current-tab-on-page-refresh