如何在不刷新頁面的情況下更改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頁面只會被掛載一次，所有後續路由都使用同一個頁面實例！