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函数外部即可
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)