Vue Router中获取路由传递过来的参数(方法详解)

更新时间：2025年02月06日 16:08:25 作者：Kris-L-

在VueRouter中,可以通过动态路由匹配和查询参数`query`来传递参数,并将路由参数或查询参数作为组件的`props`传递,动态路由匹配使用`route.params`访问参数,查询参数使用`route.query`访问,本文给大家介绍Vue Router中获取路由传递过来的参数,感兴趣的朋友一起看看吧

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路由参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决VUE的对话框el-dialog点击外部消失问题
这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
Vite+Vue3使用MockJS的实现示例
写一些纯前端的项目时,自己造数据有些麻烦,于是我们可以利用mock造一些简单的数据,来满足我们的需求,本文主要介绍了Vite+Vue3使用MockJS的实现示例,感兴趣的可以了解一下
2024-01-01
Vue3中关于getCurrentInstance的大坑及解决
这篇文章主要介绍了Vue3中关于getCurrentInstance的大坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
VSCode使用之Vue工程配置eslint
这篇文章主要介绍了VSCode使用之Vue工程配置eslint，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
关于找到任意组件实例的方法
这篇文章主要介绍了关于找到任意组件实例的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue中Key唯一标识作用小结
key是虚拟DOM的导航仪,通过唯一标识节点,提高DOM更新效率,不绑定key或使用不稳定的key会导致组件状态错乱、性能下降,甚至崩溃,下面就来介绍一下Vue中Key唯一标识作用,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-02-02
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解vuex中的this.$store.dispatch方法
这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功，需要的朋友可以参考下
2022-11-11
基于WebRTC实现音视频通话功能
WebRTC作为一种开放标准的实时通信协议,能轻松实现浏览器之间的实时音视频通信,本次主要分享基于WebRTC的音视频通话技术,讲解WebRTC原理和音视频传输等关键概念,通过案例实践,带大家掌握如何搭建一个音视频通话应用,需要的朋友可以参考下
2024-05-05
mpvue构建小程序的方法(步骤+地址)
mpvue是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，这篇文章主要介绍了mpvue构建小程序的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05