Vue 3 中如何使用 Composition API 在 setup 函数中访问路由参数？

Vue 3 中如何使用 Composition API 在 setup 函数中访问路由参数？

在 Vue 3 中，若使用 Composition API，可以通过 useRouter 和 useRoute 从 vue-router 中导入相关函数来访问路由信息。具体来说，useRoute 用于获取当前路由对象（包括 params、query 等），而 useRouter 用于执行导航操作。

示例代码如下：

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

export default defineComponent({
  setup() {
    const route = useRoute();
    
    // 访问动态路由参数，例如 /user/:id 中的 id
    console.log('User ID:', route.params.id);
    
    // 访问查询参数，例如 ?name=John
    console.log('Query name:', route.query.name);

    return {};
  }
});

解析：

• 在 Vue 2 的 Options API 中，我们通常通过 this.$route 访问路由参数，但在 Composition API 中 this 不可用。
• Vue Router 4 为 Composition API 提供了 useRoute 和 useRouter 两个函数，它们是响应式的，当路由变化时，route 对象会自动更新。
• route.params 和 route.query 分别对应路径参数和查询字符串参数，且都是响应式引用，可在模板或计算属性中直接使用。
• 注意：确保项目已正确安装并配置 vue-router 4，并在 createApp 时安装 router 实例。