Nuxt 3 中追踪重定向来源：通过 redirectedFrom 选项

2024-03-26 23:06:37

Nuxt 3 中使用 redirectedFrom 追踪重定向

问题：重定向后找不到重定向来源

在 Nuxt 3 中使用 navigateTo 进行重定向时，useRoute 的 redirectedFrom 属性默认为 undefined。这使得追踪重定向来源变得困难，例如在面包屑导航中。

解决方案：添加 redirectedFrom 选项

要解决这个问题，在使用 navigateTo 进行重定向时添加 redirectedFrom 选项。

navigateTo({
  path: '/app/documents/all-documents',
  redirectedFrom: { name: 'previous-route-name' },
})

原因：需要显式定义重定向来源

如果不设置 redirectedFrom 选项，Nuxt 无法自动确定重定向来源，因此 redirectedFrom 将保持 undefined。

使用方法：使用 useRoute 访问 redirectedFrom

添加 redirectedFrom 选项后，可以使用 useRoute 访问 redirectedFrom 对象。

const route = useRoute()
console.log(route.redirectedFrom.name) // previous-route-name

注意事项：仅限于 navigateTo

redirectedFrom 选项仅在使用 navigateTo 时可用，在使用其他导航方法（如 router.push）时不可用。

示例：追踪重定向来源

以下示例演示了如何在 Nuxt 3 中使用 redirectedFrom 追踪重定向来源：

<script setup>
import { useRouter } from 'nuxt/app'

const router = useRouter()

const handleClick = () => {
  router.navigateTo({
    path: '/app/documents/all-documents',
    redirectedFrom: { name: 'home' },
  })
}
</script>

<template>
  <button @click="handleClick">Navigate to All Documents</button>
</template>