我要评论在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路由参数内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论