您现在的位置是：首页 >学无止境 >Vue Router中如何获取路由传递过来的参数网站首页学无止境

在Vue Router中可以通过动态路由匹配和查询参数query来传递参数；同时也可以将路由参数或查询参数作为组件的props传递，这样组件可以直接通过props来访问这些参数。
1. 动态路由匹配
如果在路由配置中使用了动态路由(如/user/:id)，则可以通过route.params.id获取该参数。

// 路由配置
const routes = [
  { path: '/user/:id', component: User }
];

// 组件中获取参数
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.id;
</script>

2. 查询参数query
如果URL中有查询字符串(如/user?id=123)或路由跳转时写了query【如router.push({path: ‘/user’,query: { id: 123}});】，则可以通过route.query.id获取该参数。

// 路由配置
const routes = [
  { path: '/user', component: User }
];

// 组件中获取参数
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.query.id;
</script>

3. 通过 props 传递参数

• 在路由配置中启用 props，并将 params 作为 props 传递。

// 路由配置
const routes = [
  { path: '/user/:id', component: User, props: true }
];

// 组件中通过 props 获取参数
<script setup>
import { defineProps, onMounted } from 'vue';

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

onMounted(() => {
  console.log(props.id);
});
</script>

• 通过 props 传递查询参数。

// 路由配置
const routes = [
  { path: '/user', component: User, props: (route) => ({ id: route.query.id }) }
];

// 组件中通过 props 获取参数
<script setup>
import { defineProps, onMounted } from 'vue';

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

onMounted(() => {
  console.log(props.id);
});
</script>