在VueRouter中,可以通过动态路由匹配和查询参数`query`来传递参数,并将路由参数或查询参数作为组件的`props`传递,动态路由匹配使用`route.params`访问参数,查询参数使用`route.query`访问,本文给大家介绍VueRouter中获取路由传递过来的参数,感兴趣的朋友一起看看吧 
目录
1. 动态路由匹配2. 查询参数query3. 通过 props 传递参数在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>
