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 //12345this.id = this.$route.query.id //12345}}
</script>
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) //121345this.$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>
