Vue3项目怎么取路由传过来的值

在Vue3项目中，获取从路由传过来的参数通常发生在组件的beforeCreate()、created()钩子函数或者生命周期钩子mounted()里面。具体步骤如下：

通过props接收：
如果是从父组件通过<router-view :some-param="$route.params.yourParam">这样的动态路由传递的参数，那么可以在子组件里定义一个prop，然后在组件的props选项中声明并接收它。

// 父组件
<template>
<router-view :your-param="parentParam"></router-view>
</template>

<script setup>
import { ref } from 'vue';
const parentParam = ref(yourParentRouteValue);
</script>
登录后复制

在组件内获取当前路由：
使用Vue Router提供的useRouter全局插槽，在setup()钩子中导入它。

// 子组件
import { useRouter } from 'vue-router';

setup() {
const router = useRouter();
const yourParam = router.currentRoute.value.params.yourParam;
}
登录后复制

在created()或beforeCreate()中读取参数：
如果需要在组件创建之前就访问参数，可以考虑在beforeCreate()钩子中设置。

setup() {
beforeCreate(() => {
// 在这里你可以访问到 $route 对象
const yourParam = this.$route.params.yourParam;
});
},
登录后复制