vue3中使用router导致的 Maximum recursive updates exceeded in component ＜index＞错误

遇到的问题

使用在/tts路由页面中添加点击按钮去实现router /workCreate跳转

const router = useRouter();
const useAuido = (item) =>
{
  router.push({
      name: "workCreate",
      query: {
        audioUrl: item.file_path,
      }
    });
}

编译各种没有问题，但是每次run dev tts路由死活都不显示，还报错

:5173/#/tts:1 Uncaught (in promise) Maximum recursive updates exceeded in component <index>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

还混杂了一堆

 Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 

开头以为是 template slot写法导致的查半天
后面才发现根本不是，就是少了一个import语句

解决方案：

import { useRouter } from "vue-router";  //就是少了这一句
const router = useRouter();