Nuxt.js 路由器 - 在不重新安装新页面的情况下更改路由参数？

Question

我有一个带有 Nuxt.js (v 2.15.7) 的单页应用程序，它需要从 URL 获取两个参数。例如：

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

所有这 3 个地址都应呈现在 pages/index.vue 中找到的相同页面，我只想能够在 $route.params.chapterNo 和 $route.params.sectionNo 更改时读取它，而无需真正重定向到另一个页面。

我通过如下编辑 my nuxt.config.js file 部分完成了这项工作：

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 属性，但这给了我 page not found 个错误。

尝试 1：

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

尝试 2：

我尝试了带有 define multiple parameters 选项的 router-extras 模块，但每次路由更改时也会重新安装 pages/index.vue。这是我的尝试，它产生了同样的问题：

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

有没有什么办法不用重新挂载就可以改变路由获取参数pages.index.vue？

Answer 1

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

<Nuxt keep-alive />

demo 1

要仅缓存该特定页面，请将 keep-alive-props.include 与组件名称（页面路径）一起使用：

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

demo 2

Answer 2

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

这让我产生了使用

强制为页面分配常量键的想法

<Nuxt nuxt-child-key="doNotReMount"/>.

现在密钥不会在每个新路由上更新，pages/index.vue 页面只安装一次，所有后续路由都使用该页面的同一个实例！

Nuxt.js 路由器 - 在不重新安装新页面的情况下更改路由参数？

Nuxt.js router - change route params without re-mounting a new page?

vue.js

vue-router

nuxt.js

尝试 1：

尝试 2：