vue3中的router和useRouter的区别

news2024/11/24 17:24:17

结论:从vue-router的官方文档中发现,useRouter需要在setup中使用,而router可以在任何组件中使用。二者是等价的,适用场景不同。

 

问题:使用useRouter创建的实例,未能成功调用方法push()。会报错:Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')

//错误场景:在js中调用useRouter
import { useRouter } from 'vue-router' 
const router = useRouter()

router.push({path:'/login'})

解决:改用router。

import router from @/router'
router. push('/pathname')

 

原因:因为 useRouter只能在 setup中使用,如 以下场景:

 router 适用面更广

 参考:

vue3中的路由传参以及router和route的区别_useroute和userouter的区别_莫尔道嘎老范的博客-CSDN博客

vue3路由的两种引入方式useRouter和router进行页面跳转_userouter()_qq_26596795的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/902282.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

gdb 常用命令

gdb 常用命令 文章目录 gdb 常用命令gdb 调试一般步骤常用命令infostep、next、continue、finish、untilexaminebreakinfo 、enable、disable和delete命令 backtrace和framebacktraceframe listprintwhatis和ptypethreadnext、stepreturn、finishuntiljumpdisassembleset args …

攻防世界-can_has_stdio?

原题 解题思路 这使用的是brainfuck语言,语言介绍如下:Brainfuck详解。 使用网站解码即可:CTF在线工具。

《HeadFirst设计模式(第二版)》第十一章代码——代理模式

代码文件目录: RMI: MyRemote package Chapter11_ProxyPattern.RMI;import java.rmi.Remote; import java.rmi.RemoteException;public interface MyRemote extends Remote {public String sayHello() throws RemoteException; }MyRemoteClient packa…

前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现…

Windows 平台下微软开发的神器 PowerToys 使用笔记

文章目录 Part.I IntroductionPart.II 安装Part.III 常用操作Chap.I 快捷键Chap.II 分屏示例 Reference Part.I Introduction PowerToys 是一款来自微软的系统增强工具,就像是一个神奇的 Win10 外挂,整套软件由若干子组件构成,包括&#xff…

从零开始创建 Spring Cloud 分布式项目,不会你打我

目录 一、Spring Cloud 和 分布式 二、创建新项目 三、导入 Spring Cloud 依赖 四、配置 Spring Cloud 一、Spring Cloud 和 分布式 Spring Cloud是一个基于Spring框架的开源微服务框架,它提供了一系列工具和组件,用于帮助开发人员构建分布式系统中…

EndNote极简入门【如何使用】

在开始菜单栏打开: (点左下角忽略即可) 第一次打开呢就如下图所示: 空白的,只有一个灰色的界面: 新建一个自己库: 然后就会弹出东西啦: 导出endnote学术期刊的引文:&…

人工智能时代未来程序员必备的三大利器:异,理,说

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

Python学习:迭代器与生成器的深入解析

函数在Python中扮演着重要角色,不仅可以封装代码逻辑,还能通过迭代器和生成器这两种强大的技术,实现更高效的数据处理和遍历。本篇博客将深入探讨Python函数的迭代器和生成器,结合实际案例为你揭示它们的神奇,以及如何…

《论文阅读18》 SSD: Single Shot MultiBox Detector

一、论文 研究领域: 2D目标检测论文:SSD: Single Shot MultiBox Detector ECCV 2016 论文链接论文github 二、论文概要 SSD网络是作者Wei Liu在ECCV 2016上发表的论文。对于输入尺寸300x300的网络 使用Nvidia Titan X在VOC 2007测试集上达到74.3%mA…

无涯教程-PHP - 条件判断

if... elseif ... else和switch语句用于根据不同条件进行判断。 您可以在代码中使用条件语句来做出决定, PHP支持以下三个决策语句- if ... else语句 - 如果要在条件为真时执行,而在条件不为真时执行另一个代码,请使用此语句 els…

nodejs+vue古诗词在线测试管理系统

一开始,本文就对系统内谈到的基本知识,从整体上进行了描述,并在此基础上进行了系统分析。为了能够使本系统较好、较为完善的被设计实现出来,就必须先进行分析调查。基于之前相关的基础,在功能上,对新系统进…

免费开源使用的几款红黑网络流量工具,自动化的多功能网络侦查工具、超级关键词URL采集工具、Burpsuite被动扫描流量转发插件

免费开源使用的几款红黑网络流量工具,自动化的多功能网络侦查工具、超级关键词URL采集工具、Burpsuite被动扫描流量转发插件。 #################### 免责声明:工具本身并无好坏,希望大家以遵守《网络安全法》相关法律为前提来使用该工具&am…

C++ string 的用法

目录 string类string类接口函数及基本用法构造函数,析构函数及赋值重载函数元素访问相关函数operator[]atback和front 迭代器iterator容量操作size()和length()capacity()max_sizeclearemptyreserveresizeshrink_to_fit string类对象修改操作operatorpush_backappen…

vue3组件多个根节点报错

打开扩展商店搜索下载 vetur 打开设置命令面板 搜索eslint 将下面的勾选取消

Spring MVC相关异常类

Spring MVC相关异常类 使用@ResponseStatus修饰异常类使用@ExceptionHandler修饰异常处理方法 使用@ResponseStatus修饰异常类 如果希望程序抛出自定义异常时也能被异常解析器解析成HTTP状态码,从而显示Web服务器提供的错误页面&…

统一规范化,东盟区域化发展,致力于建立电动汽车生态系统

根据印尼外交部东盟经济合作司司长的透露,东盟正在致力于建立一个电动汽车生态系统,并期望得到东亚邻国的支持。具体而言,东盟计划在“APT”机制下宣布新的电动汽车生态系统合作计划,并预计在下个月举行的第 43 届东盟峰会上正式宣…

回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测(多指标,多图)效果一览基本介绍程…

自己实现 SpringMVC 底层机制 系列之--实现任务阶段 2- 完成客户端浏览器可以请求控制层

😀前言 本文是自己实现 SpringMVC 底层机制的第二篇之完成实现任务阶段 2- 完成客户端浏览器可以请求控制层 🏠个人主页:尘觉主页 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TabAxc96-1692497234107)(https://…

Spring MVC异常处理

Spring MVC异常处理 Spring MVC异常处理机制HandlerExceptionResolver的实现类DefaultHandlerExceptionResolver实现类DefaultHandlerExceptionResolver 在Controller的请求处理方法中手动使用try…catch块捕捉异常,当捕捉到指定的异常时,系统返回对应的…