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

，而不是真正重定向到不同的页面。

我通过编辑我的

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

属性，但这给了我

page not found

错误。

尝试1：

我尝试在根

keep-alive

组件上使用

<Nuxt>

，但这只会缓存每个页面。每次路线改变时它仍然会重新安装一次。

尝试2：

我尝试了带有

定义多个参数

选项的 router-extras 模块，但每次路线更改时也会重新安装

pages/index.vue

。这是我的尝试，它产生了同样的问题：

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

有没有办法可以改变路由获取参数而不需要重新挂载

pages.index.vue

？

Answer 1

要缓存渲染的组件，请在布局中的 keep-alive

 组件上使用 

<Nuxt>：

<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

页面仅安装一次，并且所有后续路由都使用此页面的相同实例！

Answer 3

对于 nuxt 3 你可以使用

<NuxtPage :page-key="(route) => route.name" />

这将通过路由名称而不是 url 来对组件进行关键操作

我不知道为什么他们没有将其设为默认TBH