How to get params of router in Vue 3?

在 Vue3 中获取 router 中的 params 可以通过使用 Vue Router 的几种不同方法来实现。Vue 3 提供了一个组合式 API，可以让我们通过 useRoute 这个函数来获取当前路由的信息，其中就包括了路由参数（params）。下面我将详细介绍如何在 Vue3 中使用这种方法来获取 params。

首先，确保你已经在你的 Vue 3 项目中安装并设置了 Vue Router。然后，你可以在任何组件中使用以下步骤来获取路由参数：

1. 导入 useRoute： 在你的组件中，首先需要从 vue-router 包中导入 useRoute 函数。

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

1. 使用 useRoute 来获取路由信息： 在组件的 setup 函数中，调用 useRoute 函数。这将返回一个包含当前路由信息的响应式对象。

javascript
setup() {
    const route = useRoute();
    return {
        // 可以直接从 route 对象中访问 params
        params: route.params,
    };
}

1. 访问 params 属性： route 对象中的 params 属性包含了所有的路由参数。你可以直接通过 route.params 访问特定的路由参数。

javascript
setup() {
    const route = useRoute();
    const userId = route.params.userId; // 假设URL中有一个名为 'userId' 的参数
    return {
        userId,
    };
}

实例：

假设我们有这样一个路由定义，路由中包含了一个名为 userId 的参数：

javascript
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/user/:userId', component: User }
    ],
});

在 User 组件中，你可以使用上述方法来获取 userId 参数：

javascript
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.userId;

console.log("当前的用户ID是:", userId);
</script>

小结：

使用 useRoute 是在 Vue 3 中获取路由参数的推荐方法，因为它利用了 Vue 的组合式 API，提供了更好的组织和可维护性。确保你的项目使用的是 Vue 3 和兼容的 Vue Router 版本来利用这些特性。