1. Route Rendering Issue

Problem: In App.vue, a fixed component was used, preventing the route changes from rendering new pages.

Solution: Replace the fixed component with <RouterView> to display route pages.

<template>
  <!-- <home/> -->
  <RouterView />
</template>

2. Parameter Passing Between Components

Problem: Passing report.name and reportType from home.vue to report.vue. The report.name is obtained via a form in an el-dialog, and reportType is a parameter from the function that opens the dialog. Both need to be sent to report.vue when navigtaing.

Solution: Store reportType in a reactive variable within the dialog-opening function, then pass both values as query parameters during route navigation. In the destination component, read them from the route query.

// home.vue
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const report = ref({ name: '' });
const currentReportType = ref('');

function openDialog(businessType, reportType) {
  currentReportType.value = reportType;
  dialogVisible.value = true;
}

const submitForm = () => {
  router.push({
    path: '/report',
    query: {
      reportName: report.value.name,
      reportType: currentReportType.value
    }
  });
};
</script>

// report.vue
<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';

const route = useRoute();
const reportName = ref('');
const reportType = ref('');

onMounted(() => {
  reportName.value = route.query.reportName;
  reportType.value = route.query.reportType;
});
</script>

3. Type Error with Array Push

Problem: customerNames.value.push(item.value) throws an error: "Argument of type 'any' cannot be assigned to parameter of type 'never'."

Cause: The array was declared without a specific type, resulting in a never[] type.

Solution: Define the array with a proper type annotation.

<script setup>
import { ref } from 'vue';

// Incorrect: causes 'never' type
// const customerNames = ref([]);

// Correct: specify the array type
const customerNames = ref<string[]>([]);

// Now pushing is allowed
customerNames.value.push(item.value);
</script>

Ensure all reactive arrays are typed to avoid the never assignment error.