在 Vue 3 中如何获取路由的参数？

在Vue 3中获取路由参数，我们通常是在使用Vue Router的情况下进行的。获取路由参数主要有两种类型的参数需要考虑：路径参数（params）和查询参数（query）。以下是如何获取这两种参数的方法：

1. 获取路径参数（params）

路径参数是在URL的路径部分通过:指定的。比如在路由配置中定义路径为 /user/:id，这里的:id就是一个路径参数。

在Vue 3组件中，你可以通过this.$route.params来访问这些参数。例如：

javascript
export default {
  mounted() {
    // 获取名为id的路径参数
    const userId = this.$route.params.id;
    console.log("用户ID:", userId);
  }
}

2. 获取查询参数（query）

查询参数是URL中?后面的部分，例如 /search?keyword=vue 中的keyword=vue。

在Vue 3组件中，这些查询参数可以通过this.$route.query获取。例如：

javascript
export default {
  mounted() {
    // 获取名为keyword的查询参数
    const keyword = this.$route.query.keyword;
    console.log("搜索关键词:", keyword);
  }
}

实际案例

假设我们有一个用户详情页面，路由配置如下：

javascript
// 在router/index.js中
const routes = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('../views/UserDetail.vue')
  }
];

在UserDetail.vue组件中，我们可以这样获取用户ID：

javascript
export default {
  name: "UserDetail",
  
  mounted() {
    // 获取用户ID
    const userId = this.$route.params.id;
    console.log("用户ID:", userId);
    // 进行其他相关操作，如发起API请求获取用户详情
  }
}

这样，无论来自哪个途径访问/user/123，组件都能正确解析出用户ID为123，并可以据此进行后续操作。

总结来说，通过this.$route.params和this.$route.query，我们可以在Vue 3中方便地获取到所有路由传递的参数，这对于创建动态页面和响应用户操作非常有帮助。