Vue路由传参

1、在列表页传参( id )到详情页

<el-table-column label="操作" fixed="right" width="180">
    <template slot-scope="scope">
        <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
            >详情</el-button
        >
    </template>
</el-table-column>
handleEdit(row) {
    console.log(row);
    this.$router.push({
        path: "/details",//路由文件里的地址
        query: {
            id: row.sid,
        },
    });
},

在详情页接收参数

getDetail() {
  getSingleJoke({
        sid: this.$route.query.id,
    }).then((res) => {
        console.log(res);
        this.tab = res.result;
    });
},