vue3进行路由跳转时出现错误：TypeError: Cannot read properties of undefined (reading ‘push‘)

错误原因之一，useRouter的实例放在了某个函数内部定义，就像这样：

<script setup lang="ts">

import {User,Lock} from '@element-plus/icons-vue'

import {reactive} from 'vue'

import useUserStore from '@/store/modules/user'

import {useRouter} from 'vue-router'

let userStore=useUserStore()

let user=reactive({username:"",password:""})

const login=async ()=>{

  userStore.userLogin(user)

  const $router=useRouter()

  console.log($router)

  $router.push('/404')

}

</script>

原理：

在Vue 3的<script setup>语法中，变量的作用域由自动注入的上下文管理，因此在函数外部定义的变量会在整个组件中共享。然而，Vue Router的useRouter是一个依赖于组件实例的函数，因此在组件外部使用它可能会导致一些问题。

在这个代码中，useRouter在login函数内部调用。这意味着$router是在login函数内部创建的，而不是在组件的生命周期外创建。这可能导致在$router.push('/404')中出现问题，因为Vue组件的生命周期外部，Vue Router可能无法正确注入$router。

解决办法，把$router的定义挪到login函数外部即可