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