如何在不刷新页面的情况下更改Nuxt.js路由器的路由参数？

Question

我有一个使用Nuxt.js（版本2.15.7）的单页应用程序，需要从URL中获取两个参数。例如：

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

这三个地址都应该渲染在pages/index.vue中找到的相同页面，我只是想能够读取$route.params.chapterNo和$route.params.sectionNo，而不需要真正重定向到另一个页面。

我通过编辑我的nuxt.config.js文件部分实现了这一点，如下所示：

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')
    });
  }
},

唯一的问题是，这会破坏先前版本的pages/index.vue，并在每次路由到新的章节或部分时重新挂载一个新版本。每次路由更改时都会调用mounted()，但我只需要页面被挂载一次。它将在地址更改时进行动画处理，但是使用这种设置，整个DOM都会被清除和重建，从而无法进行动画处理。有什么路由配置可以在不重新渲染整个页面的情况下只获取这两个参数吗？

我尝试删除配置文件的component属性，但这会导致页面未找到错误。

尝试1：

我尝试在根<Nuxt>组件上使用keep-alive，但这只会缓存每个页面。它仍然在每次路由更改时重新挂载。

尝试2：

我尝试使用router-extras模块，并使用定义多个参数选项，但每次路由更改时也会重新挂载pages/index.vue。这是我的尝试，产生了相同的问题：

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

有没有办法更改路由以获取参数而不重新挂载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页面只会被挂载一次，所有后续路由都使用同一个页面实例！