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

来源链接：https://www.jb51.net/javascript/335231jkp.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END