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

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>

Logo

前往低代码交流专区

更多推荐