一、场景需求
- 场景需求:选中行后点击修改信息跳转到另一主页面,在另一主页面中查出前一个页面所勾选行的数据
二、前端实现
需求分析:
1.首先需要知道这是从一个主页面跳转到另一个主页面,所以需要使用到router.push进行页面路径跳转
2.路径跳转时需要传递所勾选行的唯一参数(例如id)
3.需要查询出所勾选行的页面需要监测到是从router.push该页面跳转过来的
4.在跳转后的页面中监测到是从该页面过来的则需再次请求页面的查询参数接口(前提:后端给的接口必须是能查出来你在路径中所携带的参数,例如id)
- 代码实现:
// 选中行的页面(即跳转前页面)
<template>
<table ref="tableRef" >
<template #action>
<el-button
type="primary"
:disabled="selection.length === 0"
@click="toList"
>修改信息</el-button
>
</template>
</table>
</template>
<script lang="ts">
import {
defineComponent, reactive, ref, toRefs } from 'vue';
import {
useI18n } from 'vue-i18n';
import useState from '@/hooks/useState';
import useViewVersion from '@/hooks/useViewVersion';
import {
useRouter } from 'vue-router';
import {
cusTem } from '@/services/tem';
interface ViewState {
}
export default defineComponent(