Vue+Quasar路由传参报错：RouteLocationRaw类型不匹配求助

1. 修正路由配置 #

先确保目标路由ROUTE_NAME.HOME_NEWSETTINGS的定义符合TypeScript要求。如果要传递自定义数据，推荐开启props模式，比直接用params更安全且类型友好：

// 路由配置文件（如router/index.ts）
const routes = [
  // ...其他路由
  {
    path: '/new-settings',
    name: ROUTE_NAME.HOME_NEWSETTINGS,
    component: () => import('@/pages/settings.vue'),
    // 开启props模式，将传递的参数转为组件props
    props: route => ({ ...route.params })
  }
];

2. 调整Admin.vue的跳转代码 #

给传递的数据指定明确类型，确保和目标路由的参数结构匹配，避免TypeScript类型校验报错：

// Admin.vue中修正后的跳转函数
const EditWorkSetting = (data: INewSettingsForm) => {
  router.push({
    name: ROUTE_NAME.HOME_NEWSETTINGS,
    params: data
  });
};

3. 在settings.vue中正确接收参数 #

注意使用useRoute()获取当前路由信息（useRouter仅用于跳转），并在onMounted中读取参数：

// settings.vue脚本部分
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { reactive, ref, onMounted } from "vue";
import http from "@/plugins/axios";
import { qSelectBase, INewSettingsForm } from "../../interfaces/pages/welcome";
import { ROUTE_NAME } from "@/router/Types";
import { Notify } from "quasar";

const step = ref(1);
const router = useRouter();
const route = useRoute(); // 获取当前路由实例

onMounted(() => {
  // 读取传递的参数
  const receivedData = route.params as INewSettingsForm;
  // 后续可使用receivedData做业务处理
});

// other const declarations
</script>

错误原因说明 #

出现类型不匹配的核心是：传递的params结构未与Vue Router的RouteLocationRaw类型对齐。TypeScript要求路由跳转参数必须符合预定义类型，通过给数据指定明确类型（如INewSettingsForm）、配合路由配置的props模式，即可解决该类型冲突。

内容的提问来源于stack exchange，提问作者Mira