使用vue-element-admin实现点击时跳转至指定页面并传参

最新推荐文章于 2024-09-27 07:05:28 发布

棒棒AIT

最新推荐文章于 2024-09-27 07:05:28 发布

阅读量7.5k

点赞数 7

分类专栏： VUE 文章标签： vue elementui html

本文链接：https://blog.csdn.net/qq_38371514/article/details/110491250

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本教程实现页面一点击后跳转至页面二查看消费订单列表，并且携带筛选参数

页面一

<template>
    <el-table :data="consumeList">
        <el-table-column label="名称" width="190" align="center" fixed>
            <template slot-scope="{row}">
                <span class="link-type" @click="consumeOrderLists(row.id)">
                    {{ row.name }}
                </span>
            </template>
         </el-table-column>
    </el-table>
</template>

<script>
export default {
    methods: {
        consumeOrderLists(id) {
            // 跳转至订单列表页面传参
            this.$router.push({
                path: '/pay-order/role',
                query: {
                    id: id,
                    date_time: 1606899965
                }
            }) // 带参跳转
        },
    }
}
</script>

页面二

<script>
export default {
    data() {
        return {
            listQuery: {
                date_time: new Date().getTime(),
                id: ''
            },
        }
    },
    created() {
        // 如果是跳转来的，则接受初始化参数
        if (this.$route.query) {
            this.listQuery.id = this.$route.query.id
            this.listQuery.date_time = this.$route.query.date_time
        }
    }
}
</script>

如有疑问请VX联系我 qubojie