在跳转前的页面使用 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
}