Vue Router中获取路由传递过来的参数(方法详解)
更新时间：2025年02月06日 16:08:25 作者：Kris-L-
在VueRouter中,可以通过动态路由匹配和查询参数`query`来传递参数,并将路由参数或查询参数作为组件的`props`传递,动态路由匹配使用`route.params`访问参数,查询参数使用`route.query`访问,本文给大家介绍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>到此这篇关于Vue Router中获取路由传递过来的参数(方法详解)的文章就介绍到这了,更多相关Vue Router路由参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在公司年会期间我做了个抽奖小项目，非常棒，今天把他分享到脚本之家平台，供大家学习参考，对vue3实现抽奖小项目感兴趣的朋友一起看看吧2023-01-01
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,下面这篇文章主要给大家介绍了关于vue自定义封装指令以及实际使用的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue实现导入Excel功能,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
Vue Router4中params传参失效和报错问题的解决方法
在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下2024-03-03
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现简易图片左右旋转,上一张,下一张组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue3 Radio单选切换展示不同内容,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue框架和react框架的区别以及各自的应用场景使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue.js click点击事件获取当前元素对象的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文将探讨Vue中异步请求数据未更新的常见原因,并提供解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
最新评论