vue动态路由传参的参数值是变量

在Vue.js中，动态路由通常是用来处理URL路径中含有可变部分的情况，比如我们想要创建一个用户列表页面，其URL可能是/users/:userId，这里的:userId就是动态参数，它会匹配实际请求中的一个变量值。
当你需要将一个变量值作为动态路由的参数传递时，可以在路由配置里这样写：
// 使用vue-router的动态路由语法
const routes = [
{
path: '/users/:userId',
name: 'UserDetail',
component: UserDetailComponent,
// 这里可以访问到动态参数的值
props: true, // 配置允许props传递给组件
// 在组件内部，通过this.$route.params获取参数
data() {
return { userId: this.$route.params.userId };
}
}
];
登录后复制
然后，在组件的created()或beforeRouteEnter钩子里，你可以获取并使用这个变量值。例如：
export default {
created() {
console.log('User Detail for user with id:', this.userId);
},
// ...
}
登录后复制

相关问题

获取vue3路由传参

Vue 3 中的路由传参方法
使用 params 进行传参
在 Vue 3 中，通过 params 方式传递参数时，推荐使用对象形式进行传参，并且必须指定命名路由。这种方式不仅提高了代码的可读性，还能够有效避免 URL 解析错误[^4]。
<!-- 发送端 -->
<RouterLink :to="{ name: 'user', params: { userId: 123 }}">User</RouterLink>
登录后复制
接收方可以通过调用 useRoute() 函数并访问返回的对象中的 params 属性来获取这些参数：
import { useRoute } from 'vue-router'

export default {
setup() {
const route = useRoute()

console.log(route.params.userId) // 输出：123

return {}
}
}
登录后复制
动态路由匹配
对于动态路径参数，在定义路由规则的时候可以在路径中加入冒号前缀(:)，这允许路由器识别这部分作为变量处理。之后便能像上面那样利用 params 来接受它们[^1]。
const routes = [
{
path: '/user/:id',
component: User,
children: [
// 更多子路由...
]
},
];
登录后复制
查询参数 (query)
除了 params 外，还可以采用查询字符串的形式来进行简单的键值对传输。这种情况下不需要特别设置路由名称或模式，只需要正常构建带有问号和键值对的链接即可[^3]。
<!-- 发送端 -->
<a href="/search?term=hello">Search Hello</a>

<!-- 接收端同样使用 useRoute 获取 query 数据 -->
console.log(route.query.term); // "hello"
登录后复制

vue3 路由传参使用props接受

Vue3 中通过路由传递参数并使用 props 接收
在Vue3项目中，为了实现在不同页面间的数据共享，可以利用vue-router进行路径导航的同时携带参数，并让目标组件能够接收到这些参数作为其属性。
当配置路由规则时，可以在path字段内指定动态段落[:paramName]的形式来表示该位置接受任意值作为参数[^1]。对于希望接收此参数的目标组件而言，则需设置routes对象中的相应条目加入props:true或是一个返回true的函数，以此告知框架自动将匹配到的URL片段映射成组件实例上的prop属性[^2]。
下面给出一段简单的代码示例用于说明上述过程：
// 定义路由表
const routes = [
{
path: '/user/:id', // 动态部分:id代表用户ID
name: 'User',
component: User,
props: true // 启用props模式
}
]

// 创建路由器实例
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes // (`routes: routes` 的缩写)
})

export default router;
登录后复制
接着，在名为User.vue的单文件组件里就可以像平常一样声明props变量从而获取来自父级传入的信息了:
<template>
<div class="user">
{{ id }}
</div>
</template>

<script setup>
defineProps(['id'])
</script>
登录后复制
最后要做的就是在跳转链接处提供实际数值给定好的占位符填充进去即可触发正确的渲染行为：
<!-- 使用带有 :to 属性绑定的对象形式 -->
<router-link :to="{name:'User',params:{id:'123'}}">Go to user page</router-link>
登录后复制
如此这般便完成了整个流程的设计与实现工作。