페이지 전체를 새로고침하지 않고 Nuxt SSR 모드에서 페이지 URL을 변경하려면 어떻게 해야 합니까?

페이지 전체를 새로고침하지 않고 Nuxt SSR 모드에서 페이지 URL을 변경하려면 어떻게 해야 합니까?

• Master Detail View를 구축하려고 합니다.아래 그림과 같이 목록과 상세 정보가 데스크톱에 나란히 표시되지만 모바일에서는 다른 페이지에 표시됩니다.
• 목록에 표시할 항목이 500~10000개 정도 있을 수 있습니다.
• 10000개의 아이템으로 양쪽 어프로치를 시뮬레이트 했습니다.서버/app.js 파일의 번호를 자유롭게 변경해 주세요.

• 리스트의 아이템을 클릭하면 URL이 변경되어 뒤로 버튼을 클릭할 수 있게 되어 이전 버튼으로 이동합니다.
• 페이지를 새로고침하지 않고 SSR 모드여야 합니다.

내가 뭘 시도했지?

어프로치 1 다이내믹루트

• 페이지 폴더 안에 기사 폴더와 _id를 넣었습니다.vue 파일 및 nuxt-link 추가

• 이 설정은 매우 느립니다.요약 변경에 20초 걸립니다.

• 다음은 CodeSandbox 접근법 1입니다.

접근법 2 푸시 기능이 있는 커스텀 @nuxtjs/라우터 모듈

• 디폴트 라우터 대신 커스텀 @nuxtjs/module을 사용해 보았습니다.

• 이 접근법에서는 링크가 훨씬 빠르게 선택되고 URL도 변경됩니다.

• 4877번 항목을 클릭하면 페이지가 새로고침되고 스크롤 막대가 페이지 맨 위로 돌아갑니다.

• 스크롤 바를 어디에 두거나 페이지 새로고침을 방지하려면 어떻게 해야 합니까?

• 커스텀 라우터를 사용하는 CodeSandbox의 어프로치2를 다음에 나타냅니다.

간단한 질문

• SSR 모드에서 페이지를 다시 로드하지 않고 목록에서 항목을 선택할 때 URL을 변경하려면 어떻게 해야 합니까?
• 어떤 접근법이 더 나은가?

페이지를 새로고침하거나 돔을 새로 고치지 않고history.pushState아, 아, 아, 아, 아, 아, 아, 아, 아.
을 추가합니다.

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

컴포넌트 내 에서 ""로 전화하십시오.addHashToLocation('/my/new/path') 스택」입니다.이력 스택

새 기록 항목을 푸시하지 않고 현재 위치에 조회 매개 변수를 추가하려면history.replaceState★★★★★★ 。

Vue 2.6.10 및 Nuxt 2.8.1에서 동작합니다.

★★★★★★★★★★★★★★★★★★★★★★★!
Vue Router의 URL, PushState의 URL.

Vue Router는 변경을 반영하지 않기 때문에 url의 파라미터를 취득할 수 없습니다.따라서 루트 간에 데이터를 전달하려면 다른 로직을 처리해야 합니다.이 작업은 전용 Vuex 스토어 또는 Nuxt 글로벌 버스 이벤트에서 수행할 수 있습니다.

// main component
created() {
  // event fire when pushState
  this.$nuxt.$on('pushState', params => {
    // do your logic with params
  })
},
beforeDestroy() {
  this.$nuxt.$off('pushState')
},
...

// Where there are history.pushState
this.$nuxt.$emit('pushState', params)

페이지를 "/pages/arcticles.vue"와 "/pages/arcticles/_id.vue"의 두 부분으로 분할할 수 있습니다.이 접근법은 첫 번째 목록 새로고침 리스트가 아닌 목록과 비슷합니다.속도라면 어떻게 해야 할지 모르겠어요.결과 페이지 크기는 15Mb입니다.

아크티클표시하다

<template>
  <div class="root">
    <div class="left">
      <ul>
        <li v-for="i in sortedArticles" :key="i.feedItemId">
          <nuxt-link :to="'/articles/' + i.feedItemId">
            Article {{ i.title }}
          </nuxt-link>
        </li>
      </ul>
    </div>
    <nuxt-child class="right"></nuxt-child>
  </div>
</template>

arcticles/_id.vue

<template>
  <div>
    Article {{ $route.params.id }}
  </div>
</template>

언급URL : https://stackoverflow.com/questions/58465065/how-do-i-change-the-url-of-the-page-in-nuxt-ssr-mode-without-reloading-the-whole