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

复制 1<template>
 2<div class="modify-button">
 3<el-table :data="dish_data" style="width: 100%">
 4    <el-table-column align="center" label="操作" min-width="100">
 5            <template #default="scope">
 6                    <el-button size="small" type="primary" @click="Edit(scope.row)">编辑</el-button>
 7            </template>
 8    </el-table-column>
 9</el-table>
10</div>
11</template>
12
13<script setup lang="ts">
14import { reactive, toRefs, onMounted, getCurrentInstance, ref } from 'vue'
15import { ElMessageBox } from 'element-plus'
16import { useRouter } from 'vue-router'
17import {getObtaindishes} from '@/api/index'
18
19const { proxy } = getCurrentInstance() as any
20
21const router = useRouter()
22
23const oper_data = reactive({
24    page: 0,
25    dish_data: [],
26    total: 0
27})
28
29const {page,dish_data,total} = toRefs(oper_data)
30
31
32onMounted(() => {
33    get_dishes()
34})
35
36async function get_dishes() {
37
38    try {
39        let query = {
40            page: oper_data.page
41        }
42        const res = await getObtaindishes({params:query});
43        oper_data.dish_data = res.data.result
44        oper_data.total = res.data.total
45
46    } catch (e) {
47        console.log('error',e);
48        new proxy.$tips('服务器发生错误', 'error').mess_age()
49    }
50}
51
52
53const Edit = (scope) => {
54    const params = JSON.stringify(scope)
55    router.push({name:'upload',state:{params}}) 
56}
57
58</script>
59
60<style scoped="scoped"></style>
61

跳转的后页面接收

复制 1console.log('history.state', typeof history.state.params)
 2
 3const etid_data = history.state.params
 4
 5if (etid_data != undefined) {
 6    const value = JSON.parse(etid_data)
 7    const { category, name, unitprice, unit, image, _id } = value
 8    oper_data.id = _id,
 9    oper_data.catevalue = category,
10    oper_data.name = name,
11    oper_data.unitprice = unitprice,
12    oper_data.compvalue = unit,
13    oper_data.goodsimage = image
14}