一、场景需求
- 场景需求：选中行后点击修改信息跳转到另一主页面，在另一主页面中查出前一个页面所勾选行的数据
二、前端实现
需求分析：
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({
name: 'Info',
components: {
},
setup() {
const router = useRouter();
const state = reactive({
});
const [selection, setSelection] = useState<cusTem[]>([]);
function toList() {
// selection.value选中当前行的内容
const cusNo = selection.value.map(i => {
return i.cusNo;
});
const query: any = {
cusNo: cusNo,
};
// 跳转页面
router
.push({
path: `/list`,
// 通过query传参，其参数会在URL中显示
query: query,
})
.then(() => {
// 跳转成功后进行的操作
console.log(query, 'cusNo');
});
}
return {
...toRefs(state),
tableRef,
selection,
setSelection,
toList,
};
},
});
</script>
<style scoped lang="scss"></style>
<i18n>
{
"zh": {
}
}
</i18n>
// 跳转后的页面
<template>
<table ref="tableRef" :form="defaultSearchQuery" :request="request"></table>
</template>
<script lang="ts">
import {
defineComponent,
ref,
} from 'vue';
import {
page } from '@/services/tem';
import {
useRouter } from 'vue-router';
import request from '@/plugins/api';
export default defineComponent({
name: 'List',
components: {
},
setup() {
const state = reactive({
});
const defaultSearchQuery = ref({
});
function request(params) {
// 判断URL路径中是否携带参数
if(window.location.search !== ''){
let params = window.location.search.substring(1).split('&'); // 去除'?'，然后使用'&'来分割
let cusNo = params.map(param => {
if (param.startsWith('cusNo')) {
// 如果参数以'customsClearanceNo'开始
return param.split('=')[1]; // 使用'='分割，并获取等号后面的值
}
return null;
}).filter(Boolean); // 过滤掉null值
const query: any = {
cusNo: cusNo,
...rest,
};
// 使用router.push中传递的cusNo参数进行查询
return page(query);
}else if(window.location.search === ''){
// 不是修改信息页面跳转过来的 写请求接口逻辑
// ...
return page(params);
}
}
return {
...toRefs(state),
t,
tableRef,
request,
};
},
});
</script>
<style scoped lang="scss"></style>
<i18n>
{
"zh": {
}
}
</i18n>
注意事项：
1.在使用router.push发现使用params传参时，在window.location.search中截取不到URL（这里考验的是基本工，具体原因不做详细解释，有兴趣者请自行前往Vue官网进行查询）
2.使用router.push使用query在地址栏中显示传参不会影响页面的跳转（例如跳转后的页面原URL是：…/list，通过query传参的URL是：…/list/1234564754，注明：1234564754为传递的id），具体原因与项目所使用的模式（严格或非严格）以及匹配的算法有关，具体原因不做详细解释，有兴趣者请自行查询
三、后端实现
- 在点击按钮进行跳转时通过调用后端的接口将唯一的标识符参数进行传递即可