当我尝试在methods中创建一个方法，在其中实现路由push方法切换其他url时报错Uncaught TypeError: Cannot read properties of undefined (reading 'push')

这是我的一个组件的部分代码实现：

<template>
	<div id="search-form">
		<input v-model="keywords" v-on:keyup.enter="search_start" placeholder="搜索关键词">
	</div>
</template>
<script>
    import {useRouter} from "vue-router"
    const router = useRouter();
    export default{
            name:"SearchBar",
            methods:{
            search_start(){
                if(this.keywords!=""){
                        
                        router.push({path:"/search",query:{keyword:this.keywords}})
                        console.log(this.keywords)
                    
                }
            },    
            data(){
                return{
                    keywords:""
                }
            }

    }
</script>

理想情况，它应该会跳转到/search?keywords=xxx，但是一直报错Uncaught TypeError: Cannot read properties of undefined (reading 'push')，后来翻阅编程式的导航 | Vue Router (vuejs.org)，其中提到

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

所以我将代码router.push修改为this.$router.push，并删除掉了router的定义和路由的导入，最终发现页面可以正常工作。