一、 路由跳转相关
问题描述:
实现路由跳转时网址有变化但页面没有变化
问题原因:
在App.vue里直接用了<home/>固定住了页面,导致路由变化不能把新页面渲染上去
解决方法:
把<home/>换成<RouterView>组件用以显示路由页面
<template>
<!-- <home/> -->
<RouterView></RouterView>
</template>
二、参数传递相关
问题描述:
想把home.vue里的report.name和reportType传递给report.vue,后者接收并渲染。report.name是el-dialog里用el-form-item表单获取值的元素,report已经用ref定义为响应式对象数据,而reportType是点击图片唤出el-dialog的函数openDialog里传递的参数,两个参数位置不同,如何打包传递给report.vue
解决方法:
为了从openDialog函数获取reportType值,并在跳转时将其作为参数传递给report.vue,需要确保reportType作为一个参数传递给submitForm函数
//home.vue
<script>
// 定义一个响应式引用来存储reportType
const currentReportType = ref('');
function openDialog(businessType: string, reportType: string) {
dialogTitle.value = `写尽调报告-${businessType}-${reportType}`;
currentReportType.value = reportType; // 更新当前reportType
dialogVisible.value = true; // 打开弹窗
}
const submitForm = () => {
// 在路由跳转时使用currentReportType.value作为reportType
router.push({ path: '/report', query: { name: report.value.name, reportType: currentReportType.value } });
};
</script>
//report.vue
<script>
import { useRoute } from 'vue-router';
import {ref} from 'vue'
const route=useRoute();
// 使用ref响应式地接收查询参数
const name = ref(route.query.name);
const reportType = ref(route.query.reportType);
// 随后可以直接用插值语法使用数据
</script>
三、参数类型相关
问题描述:
customerNames.value.push(item.value);报错类型“any”的参数不能赋给类型“never”的参数。
问题原因:
当看到“类型‘any’的参数不能赋给类型‘never’的参数”这样的错误时,这通常意味着 TypeScript 编译器无法确定数组的正确类型,所以它将其推断为最严格的 never
类型,这个类型只能接受 never
类型的值,而实际上没有值是 never
类型。
解决方法:
需要显式地给 customerNames
提供一个初始类型。在声明 customerNames
时,你可以这样做:
const customerNames = ref<string[]>([]);
这里,<string[]>
是一个泛型参数,告诉 TypeScript customerNames
是一个包含字符串的数组。