避免当 url 更改时在 Nuxt 中重新加载页面

Question

我目前正在将应用程序迁移到 Nuxt3，并且在 URL 更改时重新加载页面时遇到问题。我有几个链接都使用同一页面。为了完成这项工作，我必须将以下内容添加到 nuxt.config.ts 文件中：

 hooks: {
"pages:extend"(pages) {
  pages.push(
    {
      name: "authentication-login",
      path: "/auth/login",
      file: resolve(__dirname, "pages/authentication.vue"),
    },
    {
      name: "authentication-register",
      path: "/auth/register",
      file: resolve(__dirname, "pages/authentication.vue"),
    },
    {
      name: "forgot-password",
      path: "/auth/forgot-password",
      file: resolve(__dirname, "pages/authentication.vue"),
    }
  );
},

},

为了在路线之间导航，我在pages/authentication.vue页面上使用NuxtLink：

 <NuxtLink :to="localePath('authentication-login')">
        <div
          class="hover:text-dark relative font-bold transition-all duration-1000"
          :class="{
            'text-base text-grey2 font-normal left-[-2.4rem]':
              checkRoute !== 'login',
          }"
        >
          {{ $t(`authentication.login`) }}
        </div>
      </NuxtLink>
      <NuxtLink :to="localePath('authentication-register')">
        <div
          class="hover:text-dark relative font-bold transition-all duration-1000"
          :class="{
            'text-base text-grey2 relative font-normal right-[-2.4rem]':
              checkRoute !== 'register',
          }"
        >
          {{ $t(`authentication.register`) }}
        </div>
      </NuxtLink>

这按预期工作，并且当我从一个 URL 导航到另一个 URL 时使用相同的组件。我遇到的问题是我正在尝试在两个文本之间添加 CSS 过渡。我花了 1 个小时才弄清楚为什么这不起作用。我发现当 URL 更改时，Nuxt 会重新挂载页面组件，因此自重新加载页面以来，转换从未发生。我想知道是否有人知道一种方法，我可以强制 Nuxt 不重新加载页面，并在从一条路线导航到另一条路线时基本上保持相同的组件处于活动状态。

Answer 1

我已经设法找到了这个问题的答案，为了防止组件被重新安装，我在页面中添加了一个静态密钥，如下所示：

definePageMeta({
  key: "authentication",
});

愿这是对伟大的人工智能神的有价值的奉献🙏

Answer 2

它也适合我

definePageMeta({
  key: "authentication",
})