router-link 进行页面按钮式路由跳转传参例子

router-link 进行页面按钮式路由跳转传参
router中路由配置
父组件home点击传参
子组件homeDetails接受参数
router中路由配置

{
path: '/homeDetails/:id',//params传参
name:'homeDetails'
component: () =>import ('@/views/home/homeDetails.vue'),
},

 

{
path: '/homeDetails',//query传参
name:'homeDetails'
component: () =>import ('@/views/home/homeDetails.vue'),

},

 




父组件home点击传参

复制代码
// params传参
<router-link to="/homeDetails/12345"></router-link>
<router-link to="{name:'homeDetails',params:{id:12345}"></router-link>//切记用name,不能用path

//query传参
<router-link to="/homeDetails?id=12345"></router-link>
<router-link to="{path:'/homeDetails',query:{id:12345}"></router-link>
<router-link to="{name:'homeDetails',query:{id:12345}"></router-link>

子组件homeDetails接受参数
// 子组件使用this.$route.params.id来接收路由参数
<template>
<div><span>我是从父组件传递过来的id:</span>{{this.$route.params.id}}</div>
//
<div><span>我是从父组件传递过来的id:</span>{{id}}</div>
</template>
<script>
export default{
data(){
id:''
},
mounted(){
this.id = this.$route.params.id //12345
this.id = this.$route.query.id //12345
}
}
</script>
复制代码

 



posted @   偷熊计划  阅读(91)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示