페이지를 새로 고치지 않고 Nuxt.js 라우터의 라우팅 매개변수를 변경하는 방법은 무엇입니까?

Question

URL에서 두 개의 매개변수를 가져와야 하는 Nuxt.js(버전 2.15.7)를 사용하는 단일 페이지 애플리케이션이 있습니다. 예:

으아아아

세 개의 주소는 모두 실제로 다른 페이지로 리디렉션되지 않고 pages/index.vue中找到的相同页面，我只是想能够读取$route.params.chapterNo和$route.params.sectionNo에서 렌더링되어야 합니다.

저는 nuxt.config.js 파일을 다음과 같이 편집하여 부분적으로 이를 달성했습니다.

으아아아

유일한 문제는 이로 인해 이전 버전이 손상된다는 것입니다pages/index.vue，并在每次路由到新的章节或部分时重新挂载一个新版本。每次路由更改时都会调用mounted(). 하지만 페이지를 한 번만 마운트하면 됩니다. 주소 변경 시 애니메이션이 적용되지만 이 설정을 사용하면 전체 DOM이 지워지고 다시 작성되므로 애니메이션이 불가능해집니다. 전체 페이지를 다시 렌더링하지 않고 이 두 매개변수만 가져오는 라우팅 구성이 있습니까?

프로필을 삭제하려고 하는데 오류가 발생했습니다. component属性，但这会导致页面未找到

1번 시도:

루트

에서 시도했지만 이는 모든 페이지만 캐시합니다. 경로가 변경될 때마다 다시 마운트됩니다. <Nuxt>组件上使用keep-alive

두 번째 시도:

저는

를 사용해 보았습니다. 동일한 문제가 발생한 내 시도는 다음과 같습니다. router-extras模块，并使用定义多个参数选项，但每次路由更改时也会重新挂载pages/index.vue 으아아아

다시 마운트하지 않고 매개변수를 가져오기 위해 경로를 변경할 수 있는 방법이 있나요

? pages.index.vue

Answer 1

렌더링된 구성요소를 캐시하려면 <Nuxt>组件上使用keep-alive 레이아웃에서:

으아아아

데모 1

특정 페이지만 캐시하려면 keep-alive-props.include 및 구성 요소 이름(예: 페이지 경로)을 사용하세요.

으아아아

데모 2

Answer 2

기본 레이아웃 파일에서 <Nuxt keep-alive />查看Vue开发者工具时，注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vue를 사용하는 새로운 사례:

이를 통해 <Nuxt nuxt-child-key="doNotReMount"/>를 사용하여 페이지에 상수 키를 강제 할당하는 아이디어를 얻었습니다.

이제 키는 새로운 경로마다 업데이트되지 않습니다. pages/index.vue페이지는 한 번만 마운트되며 모든 후속 경로는 동일한 페이지 인스턴스를 사용합니다!