标签：传参 route homeDetails 按钮式 params 跳转 组件 id

router中路由配置

分两种方式进行举例：

第一种是params传参，第二种是query传参

 {
   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来接收路由参数

// 子组件使用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>

标签：传参,route,homeDetails,按钮式,params,跳转,组件,id
来源： https://www.cnblogs.com/zfy050323/p/16263746.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。