Vue3 中如何获取动态路由参数

在 Vue3 的项目开发中，获取动态路由参数是一个常见且重要的需求。了解如何正确获取这些参数，能让我们更好地实现页面间的数据传递与交互。

我们要明确什么是动态路由参数。在 Vue Router 中，动态路由参数用于在路径中定义变量。例如，我们可能有一个用户详情页面，每个用户有唯一的 ID，这时就可以使用动态路由参数。在路由配置文件中，我们可以这样定义：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue')
  }
];

这里的 :id 就是动态路由参数。当用户访问 /user/123 这样的路径时，123 就是参数 id 的值。

那么在组件中如何获取这个参数呢？在 Vue3 组件里，我们可以通过 setup 函数来获取。首先引入 useRoute 函数：

import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute();
    const userId = route.params.id;
    console.log(userId);
    return {
      userId
    };
  }
});

在上述代码中，useRoute 函数返回当前的路由信息对象，通过 route.params 我们就能获取到定义的动态路由参数。这样，在模板中就可以直接使用 userId 变量来展示对应的数据。

另外，如果使用的是基于类的组件语法（Vue Class Component），获取动态路由参数的方式稍有不同。我们可以通过 this.$route 来访问路由信息：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class User extends Vue {
  created() {
    const userId = this.$route.params.id;
    console.log(userId);
  }
}

无论是在新的 setup 语法还是传统的基于类的组件语法中，获取 Vue3 动态路由参数都有清晰明确的方法。掌握这些技巧，能帮助开发者在构建 Vue3 应用时更加高效地实现页面逻辑，根据不同的参数值展示相应的内容，为用户提供更好的交互体验，也使得项目的代码结构更加清晰和易于维护。