vue3常用代码

文章目录

  • 监听路由
  • vue3 警告Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
  • mitt、project/inject 无效
    • 解决方案

菜鸟做项目时发现很多 vue3 常用的代码,所以来总结一下!

监听路由

import { useRoute } from "vue-router";
let router = useRoute();
let actroute = ref(null);
watch(() => router.path,(newValue, oldValue) => {console.log("watch", newValue, oldValue);actroute.value = newValue;},{ immediate: true }
);

vue3 警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.

vue.config.js 添加上该代码:

chainWebpack: (config) => {config.plugin("define").tap((definitions) => {Object.assign(definitions[0], {__VUE_OPTIONS_API__: "true",__VUE_PROD_DEVTOOLS__: "false",__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",});return definitions;});},

参考:Vue3.4+报Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined… 处理

mitt、project/inject 无效

如果通信的组件是 router-view 里面 根据路由加载的或者有两层嵌套,那么不管是 mitt 还是 project/inject 都无法进行组件间的通信,因为 mitt 要能通信必须是该界面已经加载出来了!而 project/inject 不知道为什么,嵌套了两层后,第二层 router-view 里面的组件就无法获取了,会报错

[Vue warn]: injection "openmenu" not found. at <Resources onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <ElMain> at <ElContainer> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <App>

好像是因为第一层 router-view 被卸载了,所以 project 为 undefined 了!

解决方案

使用pinia!

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

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

相关文章

如何禁用 el-table 单独某一行,修改某一行样式等(最有效)

案例&#xff1a;根据el-table :data"tableData"中是否有invalidStatus值为1&#xff0c;如果是就是不禁用&#xff0c;否就禁用这一行&#xff0c;当然这个invalidStatus随意就行&#xff0c;只要在tabledata中的每一行数据中有这个属性就行&#xff0c;也就是row中…

Android创建保存Excel文件

Android开发生成保存Excel文件&#xff0c;首先下载两个jar包。下载地址&#xff1a;Android读写Excel文件的两个jar包资源-CSDN文库 poi-3.12-android-a.jar poi-ooxml-schemas-3.12-20150511-a.jar 把jar包放在app的libs文件夹下&#xff0c;引用jar我一般都在build.gradle的…

代码随想录算法训练营第四十一天(动态规划篇)|理论基础,509. 斐波那契数, 70. 爬楼梯, 746. 使用最小花费爬楼梯

动态规划理论基础 动态规划&#xff1a;每一个状态一定是由上一个状态推导出来的。 贪心&#xff1a;局部直接选最优的 解题步骤 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 509. 斐波那契数 题目…

conda-建立多个python环境

1. 安装 下载地址&#xff1a;Miniconda — miniconda documentation 2. 安装好了会自动配置环境变量&#xff0c;如果没有配置手动配置 3. 检查conda环境 4. 设置conda配置文件 在‪C:\Users\Administrator下新建文件【.condarc】 channels: //镜像地址- https://mirrors.…

girhub添加 SSH 密钥

1 打开终端 输入 ssh-keygen -t rsa -b 4096 -C "github邮箱地址"如果不需要密码可以一路回车 出现这个页面就是生存成功了 open ~/.ssh // 打开.ssh 找到id_rsa.pub复制出内容新建ssh密钥输入内容,保存即可

MacOS平台翻译OCR软件,双管齐下,还可自定义插件,为其添砖加瓦!

小编昨天为大家分享了Windows系统下的一款功能强大且免费的 OCR 开源工具 Umi-OCR。 今天则为大家推荐一款 MacOS系统下的一款 翻译 OCR 多功能双管齐下的桌面应用软件 Bob。这款软件虽然也上线了GitHub&#xff0c;但它不是一款开源软件&#xff0c;仓库只是作者为了用户反馈…

Mac M1 Parallels CentOS7.9 Deploy 禅道

禅道官网下载地址: https://www.zentao.net/download/max4.10-83276.html 一、官网下载 二、解压安装 将下载好的包传至CentOS7.9虚拟机 zhinian192 ~ % scp Downloads/ZenTaoPMS-max4.10-zbox_arm64.tar.gz root10.211.55.36:~ ZenTaoPMS-max4.10-zbox_arm64.tar.gz …

idea 打包跳过测试

IDEA操作 点击蓝色的小球 手动命令 mvn clean package -Dmaven.test.skiptrue# 下载源码![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff15aad1c9a546b6ab0556b5b135f409.png)

Linux命令拓展

一、tr - 字符转换 效果展示&#xff1a; 将小写转换成大写 字符压缩 通式&#xff1a;tr -s 字符删除 通式&#xff1a;tr -d 补集 通式&#xff1a;tr -c 用法&#xff1a;随机密码 二、cut - 提取 通式&#xff1a;cut [选项] 文件 选项&#xff1a; -d&#xff1a;分隔符…

C语言实现归并排序算法(附带源代码)

归并排序 把数据分为两段&#xff0c;从两段中逐个选最小的元素移入新数据段的末尾。 可从上到下或从下到上进行。 动态效果过程演示&#xff1a; 归并排序&#xff08;Merge Sort&#xff09;是一种分治算法&#xff0c;它将一个数组分为两个子数组&#xff0c;分别对这两个…

VS2022联合Qt5开发学习10(QT5.12.3联合VTK在VS2022上开发医学图像项目4——ScrollBar控制对比度、切面位置)

这篇博文是接着VS2022联合Qt5开发学习7&#xff08;QT5.12.3联合VTK在VS2022上开发医学图像项目2——十字叉标注&#xff09;-CSDN博客这篇博文延伸开发医学图像的显示渲染相关项目&#xff0c;主要介绍的是在之前显示的图像上增加滑块控制。 用到的内容有&#xff1a; VS2022…

phpstudy安装mysql5.7后在my.ini文件中无法修改sql_mode

如标题&#xff0c;windows环境下使用phpstudy安装mysql5.7后需要修改mysql中的sql_mode配置&#xff0c;但是在phpstudy中打开mysql配置文件my.ini后&#xff0c; 通过查找找不到sql_mode或sql-mode&#xff0c; 此时无法在my.ini文件中直接进行修改&#xff0c;可以使用mysq…

鸿蒙开发初体验

文章目录 前言一、环境配置1.1 安装DevEco Studio1.2 安装相关环境 二、工程创建三、工程结构介绍四、代码实现4.1 初识ArkTs4.2 具体实现 参考资料 前言 HarmonyOS是华为公司推出的一种操作系统&#xff0c;旨在为不同设备提供统一的操作系统和开发平台。鸿蒙开发的出现为用户…

(3)Elastix图像配准:项目实战(2D / 3D)

文章目录 前言一、3D图像配准1.1、项目实战(3D图像)1.2、参数文件(3D图像)1.2.1、parameter_file_rigid_3D.txt1.2.2、parameter_file_affine_3D.txt1.2.3、parameter_file_bspline_3D.txt二、2D图像配准2.1、项目实战(2D图像)2.2、参数文件(2D图像)2.2.1、parameter_f…

【云原生】Docker如何构建镜像

目录 前言 一、基于已有的镜像创建 步骤一&#xff1a;先基于现有的镜像创建一个容器&#xff0c;然后进入容器去完成修改 步骤二&#xff1a;将该容器作为一个模板提交创建为一个新的镜像 步骤三&#xff1a;基于新的镜像&#xff0c;docker run创建一个容器&#xff0c;进…

浏览器缓存机制

参考&#xff1a; 【第1250期】彻底理解浏览器的缓存机制 深入理解浏览器缓存原理 - 掘金 建议先看原文&#xff0c;我只是在原文基础做验证和补充。 网上查了很多&#xff0c;都没有查看浏览器是根据什么缓存的&#xff0c;还得是AI神器啊&#xff0c;但是神器给的结果无法…

Hadoop3.x学习笔记

文章目录 一、Hadoop入门1、Hadoop概述1.1 简介1.2 hadoop优势1.3 hadoop组成1.4 大数据技术生态体系 2、环境准备(重点)2.1 模板机配置2.2 模板创建 3、本地运行模式&#xff08;官方WordCount&#xff09;4、Hadoop集群搭建(&#x1f31f;重点)4.1 环境准备(集群分发脚本xsyn…

深入到 TLP:PCI Express 设备如何通信(第二部分)

数据链路层数据包 除了用其标头&#xff08;2 个字节&#xff09;包装 TLP 并在末尾添加一个 CRC&#xff08;LCRC 实际上是 4 个字节&#xff09;之外&#xff0c;数据链路层还运行自己的数据包以保持可靠的传输。这些特殊数据包是数据链路层数据包 &#xff08;DLLP&#xf…

抖音VR直播:沉浸式体验一键打通360度精彩

随着5G技术的发展&#xff0c;VR直播近年来也逐步进入到大众的视野中&#xff0c;相比于传统直播&#xff0c;VR直播能够提供更加丰富的内容和多样化的互动方式&#xff0c;让观众更有沉浸感和参与感。现如今&#xff0c;抖音平台也上线了VR直播&#xff0c;凭借沉浸式体验和有…

《安富莱嵌入式周报》第331期:单片机实现全功能软件无线电,开源电源EEZ升级主控,ARM 汇编用户指南,UDS统一诊断服务解析,半导体可靠性设计手册

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 目录&#xff1a; 1、单片机实现低配版全功能软件无线电&#xff0c;范围0.5-30 MHz&#xff0c;支持SSB、AM、FM和CW …