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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack+vue.js快速入门教程

    webpack+vue.js快速入门教程

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程,有需要的可以参考借鉴。
    2016-10-10
  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    vue中解决拖拽改变存在iframe的div大小时卡顿问题

    这篇文章主要介绍了vue中解决拖拽改变存在iframe的div大小时卡顿问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue.js diff算法原理详细解析

    vue.js diff算法原理详细解析

    这篇文章主要介绍了vue.js diff算法原理详细解析,diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom。顾名思义,diff算法可以找到新旧虚拟Dom之间的差异,但diff算法中其实并不是只有对比虚拟Dom,还有根据对比后的结果更新真实Dom
    2022-06-06
  • vue设置全局访问接口API地址操作

    vue设置全局访问接口API地址操作

    这篇文章主要介绍了vue设置全局访问接口API地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue使用localStorage存储数据的方法

    Vue使用localStorage存储数据的方法

    这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue-cli的工程模板与构建工具详解

    vue-cli的工程模板与构建工具详解

    vue-cli提供的脚手架只是一个最基础的,也可以说是Vue团队认为的工程结构的一种最佳实践。这篇文章主要介绍了vue-cli的工程模板与构建工具 ,需要的朋友可以参考下
    2018-09-09
  • element跨分页操作选择详解

    element跨分页操作选择详解

    这篇文章主要为大家详细介绍了element跨分页操作选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue记住滚动条和实现下拉加载的完美方法

    Vue记住滚动条和实现下拉加载的完美方法

    这篇文章主要给大家介绍了关于Vue记住滚动条和实现下拉加载的完美方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • vue实现简易的双向数据绑定

    vue实现简易的双向数据绑定

    这篇文章主要介绍了vue如何实现简易的双向数据绑定,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue插件打包与发布的方法示例

    Vue插件打包与发布的方法示例

    插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,这篇文章主要介绍了Vue插件打包与发布的方法示例,感兴趣的小伙伴们可以参考一下
    2018-08-08

最新评论