vue3-在自定义hooks使用useRouter 报错问题

文章目录

  • 前言
  • 一、报错分析
      • 报错的Vue warn截图:
      • 查看文档
  • 二、那么在hook要怎么引入路由呢?


前言

记录在vue3项目中,hook使用useRouter 报错问题


一、报错分析

报错的Vue warn截图:

在这里插入图片描述
警告 inject() can only be used inside setup() or functional components.
** 直接机翻:Inject()只能在setup()或功能组件中使用。**

查看文档

因为我们在 setup 里面没有访问 this,所以我们不能再直接访问 this. r o u t e r 或 t h i s . router 或 this. routerthis.route。作为替代,我们使用 useRouter 和 useRoute 函数:
在这里插入图片描述

一开始还以为是 const $router = useRouter() 调用时机 1 ,2 ,3 位置都是 $router ==> undefined

在这里插入图片描述
断点调试
在这里插入图片描述

二、那么在hook要怎么引入路由呢?

在这里插入图片描述
这样引入就可以了

 import $router from "@/router"

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

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

相关文章

【LeetCode刷题笔记】103. 二叉树的锯齿形层序遍历

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…

数据链路层之广域网、PPP协议、HDLC协议

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

【C语言之 CJson】学CJson看这一篇就够了

文章目录 前言一、下载CJson二、创建一个json2.1 创建json对象cJSON类型详解 2.2 创建键值对2.3 添加嵌套的 JSON 对象2.4 添加数组创建数组添加元素到数组添加数组到obj 2.5 将 JSON 对象转为字符串2.6 释放内存2.7 示例代码 三、解析json3.1 解析json root3.2 把一个key解析出…

springboot足球社区管理系统

springboot足球社区管理系统 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9nNm8nvEVfIR2pg?pwdekj…

计算机导论——第39章 文件和目录

除了虚拟化CPU和内存&#xff0c;另外一个是持久存储&#xff0c;永久存储信息。持久存储设备与内存不同&#xff0c;内存在断电时内容会丢失&#xff0c;而持久存储设备会保持这些数据不变。 1. 文件和目录 文件就是一个线性字节数组&#xff0c;每个字节都可以读取或者写入…

Bean的加载方式

Bean的加载方式 文章目录 Bean的加载方式bean的xml方式声明bean的加载方式二&#xff1a;XML注解当时声明beanbean的加载方式三&#xff1a;注解方式声明配置类bean加载方式扩展——FactoryBean bean的xml方式声明 <?xml version"1.0" encoding"UTF-8"…

图论|并查集理论基础 1971. 寻找图中是否存在路径

什么是并查集 并查集是一种数据结构&#xff0c;用于处理一些不交集的合并及查询问题。它支持两种操作&#xff1a; 查找&#xff08;Find&#xff09;&#xff1a;确定某个元素属于哪个子集。它可以用来判断两个元素是否属于同一个子集。 合并&#xff08;Union&#xff09;&…

windows 你的电脑不能投影到其他屏幕,请尝试重新安装驱动程序

注意 千万不要去下载什么驱动精灵&#xff0c;太垃圾不好用还一堆附带的软件。按以下步骤进行解决&#xff1a; 解决方法 可能是显卡驱动的问题&#xff0c;我的笔记本按照如下步骤重启一下驱动后解决了&#xff0c;步骤如下: 右键点击桌面的开始菜单&#xff0c;选择”设备…

javaee实验:MVC 框架技术应用——URL 映射及方法参数的使用

目录 urlmvc框架mvc框架的设计mvc流程 实验目的实验内容实验过程创建项目创建项目结构编写代码简单测试一下 url 和 Hypertext 以及 HTTP 一样&#xff0c;URL 是 Web 中的一个核心概念。它是浏览器用来检索 web 上公布的任何资源的机制 URL 代表着是统一资源定位符&#xff…

智能优化算法应用:基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于JAYA算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.JAYA算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

循环神经网络RNN及其变体LSTM、GRU

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息&#xff1b;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立&#xff0c;但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…

六、三台主机免密登录和时钟同步

目录 1、免密登录 1.1 为什么要免密登录 1.2 免密 SSH 登录的原理

TeXworks 初次使用 debug方法

下载Texlive&#xff0c;打开TeXworks editor 编译排版&#xff0c;可能会报很多错&#xff1a; 1. ! Fatal Package fontspec Error: The fontspec package requires either XeTeX or (fontspec) LuaTeX. (fontspec) (fontspec) …

C++ string类(2)—成员访问、插入、删除、替换、查找和交换操作

目录 一、成员访问 1、[ ]&at 2、front( )&back( ) 二、插入元素 三、删除元素 四、替换元素 五、查找元素 1、查找第一次出现位置 2 、在指定范围内查找 六、交换字符串 七、c_str 八、rfind&substr 一、成员访问 1、[ ]&at 虽然二者功能一样&…

数据结构奇妙旅程之顺序表和链表

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

C++-内联函数

目录 一.什么是内联函数 1.内联函数的概念 2.内联函数的定义 二.C中引入内联函数的原因 三.什么样的函数适合被声明为内联呢&#xff1f; 四.面试题 一.什么是内联函数 1.内联函数的概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开…

springboot 2.4.4集成 hikari连接池多数据源实例

文章目录 前言一、配置步骤1.1 pom配置1.2 application.properties配置1.3 DataSourceContextHolder类1.4 DynamicDataSource1.5 DataSourceconfig类配置1.6 配置TargetDataSource注解1.7 切面方法1.8 dao的写法 二、测试验证2.1 启动springboot项目2.2 检查数据库连接2.3 debu…

python——进程常用功能

Python的multiprocessing模块提供了强大的并行处理能力&#xff0c;以下是几个功能的详细解释&#xff1a; join(): 在multiprocessing中&#xff0c;join方法用于阻塞主进程直到指定的进程终止。这对于确保所有子进程在程序结束前完成其工作是很有用的。deamon(): 在multipro…

基于51单片机的十字路口交通灯_5s黄灯倒计时闪烁

基于51单片机十字路口交通灯_5s黄灯闪烁 &#xff08;程序仿真仿真视频&#xff09; 仿真&#xff1a;proteus 7.8 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;J006 功能要求 交通灯运行状态&#xff1a; &#xff08;1&…

硬件基础:二极管

基本定义 二极管的内部其实就是一个PN结。 把PN结封装起来&#xff0c;两边加上两个电极&#xff0c;就组成了半导体二极管。简称二极管&#xff08;Diode&#xff09; 二极管和PN结一样&#xff0c;具有单向导通性&#xff1a; 外观和正负极 常见芯片封装如下&#xff1a; 一般…