我有一个使用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？