关于实习前端项目开发遇到的问题及解决方法

一、 路由跳转相关

问题描述：

实现路由跳转时网址有变化但页面没有变化

问题原因：

在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 是一个包含字符串的数组。