Nuxt.js 路由器 - 更改路由参数而不重新安装新页面？答案

【问题标题】：Nuxt.js router - change route params without re-mounting a new page?Nuxt.js 路由器 - 更改路由参数而不重新安装新页面？
【发布时间】：2021-09-28 10:54:43
【问题描述】：

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

【问题讨论】：

如果你尝试用这个包添加别名怎么办？ github.com/nuxt-community/…
我看到了解决方案。同时我想知道这是否不能用查询参数而不是路径变量来解决。
@kissu 谢谢你的建议。我刚刚尝试使用带有多个参数选项的router-extras，但它仍然会重新安装pages/index.vue。

标签： vue.js nuxt.js vue-router

【解决方案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

【讨论】：

感谢您的建议。我在我的构建和您的演示中尝试过，但看起来页面已重新构建，并且每次路由更改时仍会调用 mounted()。见这里：i.imgur.com/GrrCZ3s.jpg 我在mounted() 上添加了console.log("Hello")，它被触发了3 次。一旦它第一次访问了/chapter5、chapter5/section3 和/，它最终停止在后续访问中被触发。似乎keep-alive 在您第一次到达每个地址时重新渲染，然后记住每次后续访问。
@Marquizzo keep-alike 确实保持缓存。但未来的变化仍然需要触发 IMO。
@kissu 是的，看起来keep-alive 不是我正在寻找的解决方案。我试图只捕获新的路由器参数而不重新渲染页面。
@Marquizzo 它安装 3 次不同时间的原因是因为您有 3 条具有相同组件（页面）的不同路由：一个是从基于目录的路由自动搭建的，另外两个来自 @987654338 @在nuxt.config.js.
@tony19 谢谢，我明白为什么会这样。 keep-alive 缓存组件而不破坏它，但它仍然会在您第一次登陆每个可能的路线时重新安装页面的新版本。有 6 个章节和 10 个部分，这是页面将安装的 60 次。我只尝试安装一次。

【解决方案2】：

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

这让我想到了通过使用强制为页面分配一个常量键

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

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

【讨论】：