Wie ändere ich die Routing-Parameter des Nuxt.js-Routers, ohne die Seite zu aktualisieren?

Question

Ich habe eine Einzelseitenanwendung, die Nuxt.js (Version 2.15.7) verwendet und zwei Parameter von der URL abrufen muss. Zum Beispiel:

domain.com 
domain.com/chapter3
domain.com/chapter3/section5

Alle drei Adressen sollten in pages/index.vue中找到的相同页面，我只是想能够读取$route.params.chapterNo和$route.params.sectionNo gerendert werden, ohne tatsächlich auf eine andere Seite umzuleiten.

Ich habe dies teilweise erreicht, indem ich meine nuxt.config.js-Datei wie folgt bearbeitet habe:

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'chapter',
      path: '/chapter:chapterNo?',
      component: resolve(__dirname, 'pages/index.vue')
    });
    routes.push({
      name: 'section',
      path: '/chapter:chapterNo?/section:sectionNo?',
      component: resolve(__dirname, 'pages/index.vue')
    });
  }
},

Das einzige Problem ist, dass dadurch die vorherige Version kaputt geht pages/index.vue，并在每次路由到新的章节或部分时重新挂载一个新版本。每次路由更改时都会调用mounted(), aber ich muss die Seite nur einmal bereitstellen. Es führt bei Adressänderungen eine Animation aus, aber bei diesem Setup wird das gesamte DOM gelöscht und neu erstellt, sodass eine Animation nicht möglich ist. Gibt es eine Routing-Konfiguration, um nur diese beiden Parameter abzurufen, ohne die gesamte Seite neu zu rendern?

Fehler beim Versuch, das Profil zu löschen. component属性，但这会导致页面未找到

Versuchen Sie 1:

Ich habe es im Root versucht

, aber dadurch wird nur jede Seite zwischengespeichert. Es wird weiterhin jedes Mal neu bereitgestellt, wenn sich die Route ändert. <Nuxt>组件上使用keep-alive

Versuch 2:

Ich habe es mit

versucht. Hier ist mein Versuch, der zum gleichen Problem geführt hat: router-extras模块，并使用定义多个参数选项，但每次路由更改时也会重新挂载pages/index.vue

<router>
{
    path: '/chapter:chapterNo?/mission:missionNo?',
}
</router>

Gibt es eine Möglichkeit, die Route zu ändern, um Parameter ohne erneutes Mounten zu erhalten

? pages.index.vue

Answer 1

要缓存渲染的组件，请在布局中的<Nuxt>组件上使用keep-alive：

<Nuxt keep-alive />

演示1

要仅缓存特定页面，请使用keep-alive-props.include和组件名称（即页面的路径）：

<Nuxt keep-alive
      :keep-alive-props="{ include: 'pages/index.vue' }"
/>

演示2

Answer 2

我在默认布局文件中使用<Nuxt keep-alive />查看Vue开发者工具时，注意到Nuxt为每个章节和部分创建了一个具有唯一键的pages/index.vue的新实例：

这给了我一个想法，通过使用<Nuxt nuxt-child-key="doNotReMount"/>来强制分配一个常量键给页面。

现在，每次新路由时键不会更新，pages/index.vue页面只会被挂载一次，所有后续路由都使用同一个页面实例！