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.hqwc.cn/news/229747.html

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

相关文章

【蓝桥杯选拔赛真题26】C++字符串逆序 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++字符串逆序 一、题目要求 1、编程实现 2、输入输出 二、算法分析

如何在Rocky Linux中安装nmon

一、环境基础 [rootlocalhost nmon16d]# cat /etc/redhat-release Rocky Linux release 9.2 (Blue Onyx) [rootlocalhost nmon16d]# uname -r 5.14.0-284.11.1.el9_2.x86_64 [rootlocalhost nmon16d]# 二、安装步骤 在Rocky Linux和AlmaLinux等基于RHEL 的发行版上&#xff…

高速USB转以太网芯片CH397各系统使用指南

简介 CH397是一款USB2.0高速转以太网芯片,支持10M/100M网络的以太网MACPHY,内置青稞RISC-V 处理器、符合IEEE802.3 和IEEE802.3az-2010 协议规范。支持Windows/ Linux /macOS /iOS /Android 等多平台各系统,适配各类台式电脑、笔记本电脑、平…

Swift构造器继承链

类类型的构造器代理 Swift构造器需遵循以下三大规则: 指定构造器必须调用它直接父类的指定构造器方法便利构造器必须调用同一个类中定义的其他初始化方法便利构造器在最后必须调用一个指定构造器 两段式构造过程 Swift 中类的构造过程包含两个阶段。第一个阶段&a…

小红书广告投放形式有哪些,软文形式特点是什么?

现在广告的形式多种多样,针对不同的投放形式,面对的用户群体和投放渠道也都不一样。在平台上进行广告投放,可以快速提升品牌曝光和销量转化。本次将围绕小红书广告投放形式有哪些,软文形式特点是什么展开讨论,希望能对…

Steam搬砖上的十大网络骗术

一、buff\igxe网站api问题 骗术总结:骗子利用api链接,在网站发起报价的同时,csgo账号发起同样的报价; 解决方法:在交易网站卖完东西后,在steam注销api链接,下次使用再更换新的。交易过程中核对对…

[数据结构]-map和set

前言 作者:小蜗牛向前冲 名言:我可以接受失败,但我不能接受放弃 如果觉的博主的文章还不错的话,还请点赞,收藏,关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、键值对…

“GIF转PNG轻松转换,图片批量处理神器,提升你的图像管理效率!“

你是否曾经为转换GIF格式到PNG格式而感到困扰?或者为处理大量图片而感到烦恼?现在,我们为你推荐一款全新的GIF到PNG转换工具,以及一款图片批量处理工具,让你的图像管理工作变得轻松愉快! 首先,…

Redis安装和部署详细流程

文章目录 一、Windows环境下安装 Redis1.1 下载Redis1.2 启动redis服务器1.3 启动redis客户端1.4 配置环境变量 参考资料 一、Windows环境下安装 Redis windows系统环境下,redis安装方式主要有: zip压缩包方式 https://redis.io/download 或者 https:/…

ChatGPT生成的一些有趣的文件管理用python小程序

1. 查找当前位置中的所有文件夹,并在每个文件夹中增加一个名为 abc 的新文件夹 import osdef create_abc_directories(root_dir.):# 获取当前目录下的所有目录subdirectories [d for d in os.listdir(root_dir) if os.path.isdir(os.path.join(root_dir, d))]# 在…

vue3实现元素拖拽移动功能

效果图 实现拖拽移动 首先我们给需要实现功能的元素加一个draggable"true"让元素能够被拖拽 先来认识两个搭配draggable属性一起使用的事件——ondragstart和ondragend,它们的定义分别为: ①. ondragstart 事件在用户开始拖动元素或选择的文…

Linux安装Java环境

处理安装环境 检查系统版本 [rootjeven ~]# cat /etc/centos-release CentOS Linux release 7.6.1810 (Core)检查系统内核版本 [rootjeven ~]# uname -r 6.1.8-1.el7.elrepo.x86_64清空卸载java环境(如果已经安装了) 查询java所在位置 [rootjeven …