Nuxt.js 如何获取路由参数？

推荐答案

在 Nuxt.js 中，可以通过 this.$route.params 来获取路由参数。例如，如果你有一个动态路由 /user/:id，你可以通过以下方式获取 id 参数：

export default {
  mounted() {
    const userId = this.$route.params.id;
    console.log(userId);
  }
}

本题详细解读

1. 动态路由参数

在 Nuxt.js 中，动态路由参数是通过在路由路径中使用冒号 : 来定义的。例如，/user/:id 表示 id 是一个动态参数，可以在页面组件中通过 this.$route.params.id 来获取。

2. this.$route 对象

this.$route 是 Vue Router 提供的一个对象，包含了当前路由的信息。其中 params 属性是一个对象，包含了所有动态路由参数。

3. 使用场景

• 获取单个参数：如果路由路径中只有一个动态参数，可以直接通过 this.$route.params.paramName 获取。
• 获取多个参数：如果路由路径中有多个动态参数，例如 /user/:id/post/:postId，可以通过 this.$route.params.id 和 this.$route.params.postId 分别获取。

4. 示例代码

假设你有一个动态路由 /user/:id，你可以在页面组件中这样获取 id 参数：

export default {
  mounted() {
    const userId = this.$route.params.id;
    console.log(userId);
  }
}

5. 注意事项

• 生命周期钩子：通常在 mounted 或 asyncData 钩子中获取路由参数，以确保组件已经挂载或数据已经加载。
• 参数变化：如果路由参数发生变化（例如从 /user/1 跳转到 /user/2），Nuxt.js 不会重新加载页面组件，因此需要在 watch 钩子中监听 $route 的变化来处理参数更新。

export default {
  watch: {
    '$route'(to, from) {
      const newUserId = to.params.id;
      console.log(newUserId);
    }
  }
}

通过以上方式，你可以在 Nuxt.js 中轻松获取并处理路由参数。