Quasar Dialog API路由失效：报错Uncaught TypeError: router.push is not a function

核心错误原因 #

你代码里的const router = useRouter;只是将useRouter函数本身赋值给了router变量，并没有调用这个Vue Router的composable函数来获取路由实例。因此router并不是一个具备push方法的路由对象，才会抛出router.push is not a function的错误。

修复步骤 #

1. 修正路由实例获取代码
   将：

const router = useRouter;

改为：

const router = useRouter();

调用useRouter()函数才能拿到正确的路由实例，此时就可以正常使用router.push方法。

2. 额外优化：移除模板中的this
   在<script setup>语法糖中，模板可以直接访问props变量，不需要加this，所以把模板里的{{ this.message }}改为{{ message }}即可。

修复后的完整代码 #

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide" v-on:keyup.enter="onOKClick">
    <q-card class="q-dialog-plugin custom-dialog">
      <q-card-section class="text-center">
        <p class="text-white">{{ message }}</p>
      </q-card-section>
      <q-card-actions align="center">
        <q-btn
          class="q-mb-md"
          color="secondary"
          label="OK"
          @click="onOKClick"
        />
        <q-btn
          class="q-mb-md"
          color="negative"
          label="Cancelar"
          @click="onDialogCancel"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from "quasar";
import { useRouter } from "vue-router";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  message: {
    type: String,
    default: "",
  },
});

defineEmits([...useDialogPluginComponent.emits]);

// 调用useRouter函数获取路由实例
const router = useRouter();

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

function onOKClick() {
  onDialogOK();

  router.push({
    name: "home",
  });
}
</script>

验证要点 #

• 确保你的项目已经正确配置了Vue Router，并且home路由的name属性确实设置为"home"
• 确认自定义Dialog组件是通过Quasar的Dialog插件API（如$q.dialog({ component: YourCustomDialog })）调用的，保证组件能正确获取到路由上下文

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