vue3.x中useRouter()执行后返回值是undefined问题解决

 更新时间:2023年09月21日 10:58:40   作者:Paul_Chan_  
这篇文章主要给大家介绍了关于vue3.x中useRouter()执行后返回值是undefined问题的解决方法,文中通过代码示例介绍的非常详细,对大家学习或者使用vue3.x具有一定的参考借鉴价值,需要的朋友可以参考下

前言

useRouter一定要放在setup方法内的顶层,否则作用域改变useRouter()执行返回的是undefined。

正确使用

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toLogin = () => {
    router.push({ name: 'login' });
};
</script>

错误使用

<script setup>
import { useRouter } from 'vue-router';
const toLogin = () => {
	const router = useRouter(); //router为 undefine
    router.push({ name: 'login' });
};
</script>

如果需要在其他js文件的非setup中使用路由对象,可以直接引用createRouter()创建的路由对象。

总结

到此这篇关于vue3.x中useRouter()执行后返回值是undefined问题解决的文章就介绍到这了,更多相关vue3.x useRouter()返回值undefined内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 对vue 键盘回车事件的实例讲解

    对vue 键盘回车事件的实例讲解

    今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue使用Sentry实现错误监控

    Vue使用Sentry实现错误监控

    Sentry 是一款功能强大的开源错误监控服务,广泛用于追踪和修复应用中的异常情况,本文将详细介绍如何在 Vue 应用中集成和使用 Sentry,感兴趣的可以了解下
    2024-11-11
  • vue v-on:click传递动态参数的步骤

    vue v-on:click传递动态参数的步骤

    这篇文章主要介绍了vue v-on:click传递动态参数的步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中transition组件在项目中运用小结

    vue中transition组件在项目中运用小结

    这篇文章主要介绍了vue中transition组件在项目中运用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • element-ui upload组件上传文件类型限制问题小结

    element-ui upload组件上传文件类型限制问题小结

    最近我遇到这样的问题,接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了,下面小编给大家介绍element-ui upload组件上传文件类型限制问题小结,感兴趣的朋友一起看看吧
    2024-02-02
  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    这篇文章主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vuex中状态管理器的使用详解

    Vuex中状态管理器的使用详解

    这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • Vue中访问指定链接并解析页面内容的完整指南

    Vue中访问指定链接并解析页面内容的完整指南

    在现代Web开发中,经常需要从其他网页获取并解析内容,本文将详细介绍如何在Vue项目中实现这一功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • vue3 elementplus table合并写法

    vue3 elementplus table合并写法

    这篇文章主要介绍了vue3 elementplus table合并写法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 在Vue中如何实现打字机的效果

    在Vue中如何实现打字机的效果

    这篇文章主要介绍了在Vue中如何实现打字机的效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论