错误原因之一,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是一个依赖于组件实例的函数,因此在组件外部使用它可能会导致一些问题。

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

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

 

Logo

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

更多推荐