Vue3 runtime-core.esm-bundler.js:221 Uncaught TypeError: router.push is not a function at tz1 (q

runtime-core.esm-bundler.js:221 Uncaught TypeError: router.push is not a function
at tz1 (query.vue:18:10)
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:278:5)
路由跳转的时候我们使用的是useRoute()和 useRouter() 来进行前端的路由跳转的

错误代码

//带r的是用来跳转的
import {useRoute} from "vue-router";
const router=useRoute();
const msg1=ref("");
const tz1=()=>{
 //路由 跳转页面 传递参数 path+query
 //path:'/study' 上哪个里面跳, q1 参数名
 router.push({ path:'/study',query: { q1: msg1.value } });
}

正确代码

import {ref} from "vue";
//带r的是用来跳转的
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  //path:'/study' 上哪个里面跳, q1 参数名
  router.push({ path:'/study',query: { q1: msg1.value } });
}

错误原因:
在做实际项目时候，有时候会粗心大意把这useRoute()和 useRouter() 搞混，导致如下的报错；
带r的是用来传参的，不带r的是用来取值的