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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!