当前位置: 首页 > news >正文

vue3+ts 项目遇到的问题和bug

1.router中使用pinia报错

在这里插入图片描述

pinia.mjs:1709 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.at useStore (pinia.mjs:1709:19)at index.ts:6:15

分析原因:因为在mian.js中,注册router总比pinia先,所以不能使用到store/index.js文件中createPinia方法

解决方法:把store实例化放到路由守卫函数里面

import { createRouter } from 'vue-router'
const router = createRouter({// ...
})// ❌ 由于引入顺序的问题,这将失败
const store = useStore()router.beforeEach((to, from, next) => {// 我们想要在这里使用 storeif (store.isLoggedIn) next()else next('/login')
})router.beforeEach((to) => {// ✅ 这样做是可行的,因为路由器是在其被安装之后开始导航的,// 而此时 Pinia 也已经被安装。const store = useStore()if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

参考:
添加链接描述
pinia

2.路由报错

在这里插入图片描述

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/"
warn @ vue-router.mjs:35
显示另外 1 个框架
收起

参考:
https://blog.csdn.net/weixin_45952652/article/details/131192829

https://blog.csdn.net/m0_64344940/article/details/130710796

3.vue 样式穿透

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.

在这里插入图片描述
把::v-deep 替换为 :deep()
在这里插入图片描述

参考:
https://blog.csdn.net/weixin_43405300/article/details/132099608

4.defineProps is a compiler macro and no longer needs to be imported

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

在这里插入图片描述
[@vue/compiler sfc]defineEmits是一个编译器宏,不再需要导入。

[@vue/compiler sfc]`defineProps’是一个编译器宏,不再需要导入。

文件里把这两个引用去掉即可

import { defineEmits, defineProps, computed } from 'vue'
改为
import {  computed } from 'vue'

5.前端什么时候使用formdata

学习项目时发现封装了一个上传hook:
用于上传表单数据,

import axios from "axios";function upload(path: string, userForm: any) {const params = new FormData()for (const i in userForm) {params.append(i, userForm[i])}// console.log(params)return axios.post(path, params, {headers: {"Content-Type": "multipart/form-data"}}).then(res => res.data)
}export default upload

那么new FormData()的作用是什么,为什么要用?

new FormData() 是 JavaScript 中的一个构造函数,用于创建新的 FormData 对象。FormData 对象用于存储键值对,并且可以模拟表单数据(表单元素和它们的值)的序列化。

需要发送二进制数据或大文件时,使用FormData非常有用

“Content-Type” 是一个 HTTP 请求头,它告诉服务器发送过来的数据是什么类型。在这种情况下,“multipart/form-data” 是一种编码类型,用于发送表单数据。这种编码类型常常用于发送包含文件上传的表单数据,因为它可以处理二进制数据和非文本数据。

常见的 Content-Type 头字段有以下几种:
application/json:用于表示 JSON 格式的数据。
application/xml:用于表示 XML 格式的数据。
text/plain:用于表示纯文本数据。
text/css:用于表示 CSS 样式表。
image/png、image/jpeg、image/gif 等:用于表示图片数据。
audio/mpeg、audio/mp3、audio/wav 等:用于表示音频数据。
video/mp4、video/webm、video/ogg 等:用于表示视频数据。
multipart/form-data:用于表示 Multipart/form-data 格式的数据,常用于文件上传。
application/x-www-form-urlencoded:用于表示 URL 编码的表单数据。

6.路由守卫中设置网页title

在这里插入图片描述
在路由中设置meta增加title

const routes = [  {  path: '/',  component: Home,  meta: { title: '首页' }  },  {  path: '/about',  component: About,  meta: { title: '关于我们' }  }  
]

在路由守卫中设置标题

import Vue from 'vue';  
import Router from 'vue-router';  Vue.use(Router);  const router = new Router({  routes,  // 在这里添加路由守卫来设置标题  beforeEach(to, from, next) {  document.title = to.meta.title; // 设置页面标题为当前路由的 meta.title  next(); // 一定要调用 next() 方法,否则路由不会继续导航  }  
});

Vue Router中meta属性如下:

属性名作用
title设置页面的标题,用于显示在浏览器标签页上
description为路由提供一个简短的描述,可用于SEO优化和搜索引擎结果描述
params定义路由参数,用于在路由组件中获取和使用这些参数
redirect重定向到另一个路由,当用户访问当前路由时,直接跳转到指定的路由
props控制路由组件的props是否可以被子路由继承
alias设置当前路由的别名,方便进行路由导航和URL管理
children定义当前路由的子路由,用于组织嵌套路由
index定义路由的初始组件,当访问该路由时,首先显示该组件
controller自定义路由的控制器,用于处理路由导航和渲染组件的逻辑
meta自定义元信息,可以在路由守卫、导航钩子等地方获取并使用这些信息

7.路由报错:main.ts:21 [Vue Router warn]: No match found for location with path “/user-manage/userlist”

在这里插入图片描述

VUE3中路由采用动态加载的模式下,当我们在当前页面刷新浏览器时,会出现这样一个警告
警告的意思是提示当前路由并不存在,刷新时此路由确实不存在

参考:https://blog.csdn.net/maoeye283301717/article/details/126482974

8.

相关文章:

vue3+ts 项目遇到的问题和bug

1.router中使用pinia报错 pinia.mjs:1709 Uncaught Error: [&#x1f34d;]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concep…...

【Linux】补充:进程管理之手动控制进程,以及计划任务

目录 一、手动启动进程 1、理解前台启动与后台启动 2、如何完成前台启动后台启动的切换 3、完成并行执行多个任务 4、结束进程 1、kill 2、killall 2、pkill 二、计划任务 1、at一次性计划任务 2、实操 2、周期性计划任务 1、关于设置周期性任务的配置文件以及格式…...

听说,工作能力强的项目经理都有这几个特征

大家好&#xff0c;我是老原。 很多项目经理每天忙忙碌碌&#xff0c;但是一看结果&#xff0c;团队业绩没有完成、人才没有培养起来、自己的管理水平和个人领导力也没有得到提升。 明明付出了很多时间和精力&#xff0c;结果却只收获了团队的抱怨&#xff0c;以及老板对你管…...

合并两个有序链表OJ

合并两个有序链表OJ 文章目录 合并两个有序链表OJ一、题目及要求二、思路分析三、代码实现 一、题目及要求 二、思路分析 其次&#xff0c;题目里说了新链表是通过拼接原来的结点形成的&#xff0c;所以说我们不需要开辟新的空间。 三、代码实现 if (list1 NULL) {return li…...

2023NOIP A层联测27 A.kotori

2023NOIP A层联测27 A.kotori 文章目录 2023NOIP A层联测27 A.kotori题目大意思路code 题目大意 琴里的飞船中有 n n n 个人&#xff0c;其中有 n − 1 n - 1 n−1 个通道&#xff0c;所以飞船的内部是一个树形结构。每个人从 1 − n 1-n 1−n 编号&#xff0c;编号越小代表…...

循环生成el-descriptions-item

0 后端返回数据格式 {"msg": "操作成功","code": 200,"data": {"id": 42,"contactInfo": [{"contactPerson": "张三","contactPhone": "13688888888"},{"contactP…...

【原创】java+swing+mysql爱心捐赠管理系统设计与实现

摘要&#xff1a; 爱心捐赠管理系统旨在管理和优化捐赠过程&#xff0c;提高效率&#xff0c;增强透明度&#xff0c;并鼓励更多的个人和企业参与公益捐赠&#xff0c;用户可以捐款或者捐物。本系统采用javaswing界面可视化技术&#xff0c;数据库使用mysql。 功能分析&#…...

【小技巧】WPS统计纯汉字(不计标点符号)

【小技巧】WPS统计纯汉字&#xff08;不计标点符号&#xff09; 首先&#xff0c;CtrlF打开查找页面&#xff1a; 选择“高级搜索”&#xff0c;然后勾选“使用通配符”&#xff0c;然后在“查找内容”后面输入&#xff1a;[一-﨩]。注意&#xff1a;一定要带“[]”和“-”且…...

【押题】24考研押题

数二选手来押24数一考研大题 1.大题必有级数。级数出在压轴题&#xff0c;考级数敛散性与数列极限的结合 2.数一倒数第二题65%考画不出图的三重积分&#xff0c;参考19年出法&#xff1b;35%考第一类曲面积分与空间解析几何的结合。大题不会考第二类线面积分 3.概率大题会考参数…...

前端设计模式

前端设计模式 &#x1f3a8; 设计模式是在软件开发中&#xff0c;针对常见问题的解决方案的经验总结。在前端开发中&#xff0c;设计模式可以帮助我们组织和管理代码&#xff0c;提高代码的可维护性和可扩展性。下面列举一些常见的前端设计模式&#xff1a; 1. 单例模式 (Sin…...

Tomcat的类加载器

详情可以参考&#xff1a;https://tomcat.apache.org/tomcat-10.1-doc/class-loader-howto.html 简要说明 Tomcat安装了多种类加载器&#xff0c;以便容器的不同部分、容器中的应用访问能够不同的类和资源。 在Java环境中&#xff0c;类加载器被组织为父-子树的形式。通常情况…...

汽车驾驶智能座舱太阳光模拟器老化试验

一、太阳光模拟器老化试验目的 太阳光模拟器氙光灯老化试验是一种常用的材料老化测试方法&#xff0c;通过模拟自然光照条件下的老化过程&#xff0c;评估材料的耐光性能和耐候性能其主要目的有: 1.评估材料在长时间暴露于自然光照条件下的耐久性能: 2.比较不同材料的耐光性…...

记录一次校园CTF--wp

一.第一题简单nc 这题直接nc 地址端口即可得到flags没有套路 二.第二题pwn:ezstack 这是一题栈溢出题目&#xff0c;查看保护&#xff1a; 没有开启PIE&#xff0c;运行下查看效果&#xff1a; 题目是一个文字购物游戏。 接着扔进IDA中分析&#xff1a; 在主函数中我们找到…...

基于减法平均算法的无人机航迹规划-附代码

基于减法平均算法的无人机航迹规划 文章目录 基于减法平均算法的无人机航迹规划1.减法平均搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用减法平均算法来优化无人机航迹规划。 …...

C语言--每日五道选择题--Day4

第一题 1、如果 x2014 &#xff0c;下面函数的返回值是&#xff08; &#xff09; int fun(unsigned int x) {int n 0;while(x 1){n;x x | (x 1);}return n; } A: 20 B: 21 C: 23 D: 25 答案及解析 C 这个函数的作用是对整型中0的个数进行统计 x x | (x1) 的作用是每次…...

OpenCV图片验证码识别与滑块验证码识别

目录 图片验证码识别&#xff1a; 一、百度OCR文字识别云服务 二、维普网获取图片验证码 三、维普网opencvocr识别验证码 四、维普网selenium登录并获取数据 滑块验证码&#xff1a; 五、猎聘网获取滑块验证码 六、猎聘网opencv计算滑动距离 七、猎聘网selenium模拟滑…...

网络安全深入学习第八课——代理与端口转发

文章目录 一、什么是代理二、正向代理三、反向代理四、正向和反向代理模拟复现 一、什么是代理 代理服务器英文全称是Proxy Server&#xff0c;其功能就是代理网络用户去取得网络信息。 形象的说&#xff1a;它是网络信息的中转站。在一般情况下&#xff0c;我们使用网络浏览…...

11月7日,每日信息差

今天是2023年11月07日&#xff0c;以下是为您准备的17条信息差 第一、五粮液否认内部讨论提价传闻 第二、雷军证实小米14销量已超百万台 第三、支付宝生活号全面开放UGC入口。据了解&#xff0c;今年以来&#xff0c;支付宝生活号陆续上线了创作者中心、热点榜单等多个内容产…...

sql异常Encountered unexpected token BINARY

1.出现错误 2023-11-06 10:48:19.604 [http-nio-8091-exec-3] WARN c.b.m.e.p.i.PaginationInnerInterceptor - [autoCountSql,343] - [e322891e-de87-4d98-8456-f6448d3c165e] - optimize this sql to a count sql has exception, sql:"selects.id,s.command,s.catego…...

P1131 [ZJOI2007] 时态同步

Portal. 先找出树上以 S S S 为起点最长的一条链&#xff0c;然后让其他链的长度都和该链对齐即可。 维护每个结点 x x x 的子树最长链 d max ⁡ ( x ) d_{\max}(x) dmax​(x)&#xff0c;则每次 DFS 求出最长链之后调整对齐的代价为 d max ⁡ ( x ) − ( d max ⁡ ( s o …...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...