Vue Router 4：避开创建/设置时路由参数不可用的陷阱

2024-01-15 14:03:42

在 Vue.js 生态系统中，Vue Router 是一个必不可少的库，它使我们在单页面应用程序中轻松管理复杂的路由和状态管理。然而，当从 Vue Router 3 迁移到最新版本 Vue Router 4 时，你可能会遇到一个常见的陷阱：在 created 或 setup 钩子中无法使用路由参数。

要了解这个问题背后的原因，我们需要深入了解 Vue Router 4 中对路由导航生命周期的更改。在 Vue Router 3 中，$route 对象在导航解析之前就已经可用了，这意味着可以在 created 或 mounted 钩子中访问路由参数。然而，在 Vue Router 4 中，为了提高性能，路由解析被推迟到 nextTick 中，这意味着在 created 或 setup 钩子中访问路由参数时，它们仍未可用。

这可能会导致一些意外的行为，特别是当你的组件依赖于在 created 或 setup 钩子中访问路由参数时。为了解决这个问题，Vue Router 4 引入了新的 onBeforeMount 钩子。此钩子在 nextTick 之后调用，此时路由参数已经可用。

因此，要避免在 created 或 setup 钩子中访问路由参数时遇到的陷阱，请遵循以下最佳实践：

使用 onBeforeMount 钩子： 将依赖路由参数的代码移至 onBeforeMount 钩子。
使用 useRoute composable： 在 setup 钩子中，可以使用 useRoute composable 来访问路由信息，包括参数。

以下是一个示例，演示如何使用 onBeforeMount 钩子来访问路由参数：

import { onBeforeMount } from 'vue'

export default {
  onBeforeMount() {
    const { params } = this.$route
    // 现在可以安全地访问路由参数
  }
}

或者，你可以在 setup 钩子中使用 useRoute composable：

import { setup } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const { params } = route
    // 现在可以安全地访问路由参数
    return {
      // ...
    }
  }
}