Vue路由传参

最新推荐文章于 2024-08-12 16:28:02 发布

蚕豆ya

最新推荐文章于 2024-08-12 16:28:02 发布

阅读量233

点赞数 2

分类专栏： vue 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45684708/article/details/120629542

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在前端应用中，通过Vue.js的`el-table-column`组件实现从列表页传递ID到详情页，并在详情页使用`getDetail`方法接收并处理参数。示例代码展示了`handleEdit`函数如何将`row.sid`作为查询参数，利用`$router.push`导航到详情页，并在详情页通过`$route.query.id`获取参数，调用API获取数据。

摘要由CSDN通过智能技术生成

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;
    });
},