vue3.2路由传参【使用state方式】

在跳转前的页面使用 state 参数

<template>

<div class="modify-button">

<el-table :data="dish_data" style="width: 100%">

    <el-table-column align="center" label="操作" min-width="100">

            <template #default="scope">

                    <el-button size="small" type="primary" @click="Edit(scope.row)">编辑</el-button>

            </template>

    </el-table-column>

</el-table>

</div>

</template>

<script setup lang="ts">

import { reactive, toRefs, onMounted, getCurrentInstance, ref } from 'vue'

import { ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'

import {getObtaindishes} from '@/api/index'

const { proxy } = getCurrentInstance() as any

const router = useRouter()

const oper_data = reactive({

    page: 0,

    dish_data: [],

    total: 0

})

const {page,dish_data,total} = toRefs(oper_data)

// 请求菜品数据

onMounted(() => {

    get_dishes()

})

async function get_dishes() {

    try {

        let query = {

            page: oper_data.page

        }

        const res = await getObtaindishes({params:query});

        oper_data.dish_data = res.data.result

        oper_data.total = res.data.total

    } catch (e) {

        console.log('error',e);

        new proxy.$tips('服务器发生错误', 'error').mess_age()

    }

}

// 编辑商品

const Edit = (scope) => {

    const params = JSON.stringify(scope)

    router.push({name:'upload',state:{params}}) //注意:此处一定要用params

}

</script>

<style scoped="scoped"></style>

跳转的后页面接收

console.log('history.state', typeof history.state.params)

const etid_data = history.state.params

if (etid_data != undefined) {

    const value = JSON.parse(etid_data)

    const { category, name, unitprice, unit, image, _id } = value

    oper_data.id = _id,

    oper_data.catevalue = category,

    oper_data.name = name,

    oper_data.unitprice = unitprice,

    oper_data.compvalue = unit,

    oper_data.goodsimage = image

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容