vue中路由传参方式this.$router.push进行编程式路由跳转传参

this.$router.push进行编程式路由跳转传参

router中路由配置
params第一种传参路由配置

{
path: '/homeDetails/:id',//要传递的参数前面加：
component: () =>import ('@/views/home/homeDetails.vue')
},

 

params第二种（name传参）或 query方式的路由配置

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

组件home点击传参

// 例如表格中点击表名称跳转新页面需要把id传到新页面使用
<template>
<el-table :data="tableDatas">
<el-table-column label="产品名称">
<template slot-scope="scope" @click="handleClick(scope.row.id)">{{ scope.row.name}}</template>
</el-table-column>
...
</el-table>
</template>
<script>
export default{
data(){
tableDatas:[];//表格数据
},
methods:{
handleClick(id){
console.log(id) //121345
this.$router.push({path:`/homeDetails/${id}`}) //params方式传参第一种方式
this.$router.push({name:'homeDetails',params:{id:id}}) //params方式传参第二种方式

// 或
this.$router.push({path:`/homeDetails`, query:{id:id}}) // query方式传参
}
}
}
</script>

 

组件homeDetails接受参数

// 子组件使用this.$route.params.id来接收路由参数
<template>
<div><span>这就是我需要的id：</span>{{$route.params.id || $route.query.id}}</div>
//或
<div><span>这也是我需要的id：</span>{{id}}</div>
</template>
<script>
export default{
data(){
id:''
},
mounted(){
this.id = this.$route.params.id //121345 params传参方式接收
//或
this.id = this.$route.query.id //121345 query传参方式接收
}
}
</script>