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
}