Java整理14

1、vue3路由机制router

npm install router
router.jsimport {createRouter,createWebHashHistory} from 'vue-router'
创建一个路由对象const router = createRouter()
向外暴露routerexport default routerconst router = createRouter({history:createWebHashHistory(),	记录路由历史routers:[		定义多个不同路径同组件之间的对应关系{path:"/home",component:home		组件名或别名}	{}{}......]	})
main.js导入router.jsimport routerconst app=createApp(App)app.use(router)app.mount('#app')App.vue中<div><router-link to="/home">文字</router-link><router-view></router-view></div>router-link帮助改变url中的地址,在任何.vue文件中都行,一个视图上可以同时存在多个router-view且每个router-view都可以设置展示哪个组件,通过name属性。<router-view name="list"></router-view>routes:[{ path:"/home",components:{ name属性名:组件名,default:组件名}//默认其它没有指定router-view的剩余组件展示}	]

2、编程式路由

<button @click="showlist()">list</button>
<script>import {userRouter} from 'vue-router'const router=useRouter()function showlist(){router.Push("路径")或router.Push({path:"路径"})	}
</script>
路由传参:方法一:键值对	?key=value&key1=value1方法二:路径		/a/b/c
useRoute接受参数import {useRoute} from 'vue-router'let route=useRoute()route.params.idroute.params路径参数route.query键值对参数
声明式传参:<router-link to="/a/b/c"></router-link>const router=createRouter({history:createWebHashHistory(),routers:[{	path:"/a:id/:name"component:组件名}]})

3、路由守卫

全局前置守卫,每次路由切换页面前都会执行beforeEach中的回调函数
router.jsrouter.beforeEach(()=>{} (to,from,next)=>{}	//to下一个页面、from上一个页面、next放行方法,只有next执行了才会被放行,next()直接放行,next("/路径")路由重定向)
全局后置守卫router.afterEach(()=>{} (to,from)=>{}	//to下一个页面、from上一个页面
)

4、Vue3数据交互Axios

promise(回调函数)
普通函数从上往下一个一个执行		串行
setTimeOut(回调函数,时间_单位毫秒)
回调函数是一种基于事件的自动调用函数,回调函数后面的代码不会等回调函数执行完再执行		并行
Promise	异步
三种状态:(1)Pending		进行中(2)Resolved	已完成(3)Rejected	已失败
<script>let promise=new Promise(function_回调函数(){}) 参数(resolve函数1,reject函数2)(1)在回调函数中如果调用resolve()方法,promise会由pending转态转成resolved(2)在回调函数中如果调用reject()方法,promise会由pending转态转成rejected
promise.then(函数3,函数4)函数3 function(){}当promise由pending转为resolved以后执行的函数4 function(){}当promise由pending转为rejected以后执行的
Async
(1)async,异步组件,用户标识函数的,async函数返回的结果就是一个promiselet promise=new Promise(()=>{})async function aaa(){}
(2)方法如果正常return结果,promise状态就是resolved,return后的结果就是成功状态的返回值
(3)方法中出现了异常则返回的值就是一个失败状态的返回值
(4)async函数返回的结果是一个promise,其状态由内部的promise决定
Await
帮助我们获取promise成功状态的返回值的关键字
(1)await右边是一个普通值,则直接返回普通值,如果右边是一个promise,则返回promise成功状态的结果。
(2)await右边如果是一个失败状态,则会直接抛异常
(3)await必须在async修饰的函数中使用,但async可以没有await
(4)await后面的代码会等await的执行完以后再执行
数据交互Axiosimport axios from 'axios'let promise=axios({请求的参数}) 返回peomise对象请求三要素:(1)请求的url(2)请求的方式(3)请求的参数axios({method:"get",url="        ",data:{若请求方式为get,data中为key=value的形式;若请求方式为post,data中为json形式}	})axios简写:axios.get(url,{请求的其它信息})axios.get(url,{params:{键值对参数},header:{  }})
Axios拦截器axios.jsimport axios from 'axios'const instance=axios.create({请求的基础路径baseURL:"  "	})请求拦截器instance.interceptors.request.use(function(){}function(){}	)响应拦截器instance.interceptors.response.use(function(){}function(){}	)

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

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

相关文章

Python数据分析案例55——基于LSTM结构自编码器的多变量时间序列异常值监测

案例背景 时间序列的异常值检测是方兴未艾的话题。比如很多单变量的&#xff0c;一条风速&#xff0c;一条用电量这种做时间序列异常值检测&#xff0c;想查看一下哪个时间点的用电量异常。 多变量时间序列由不同变量随时间变化的序列组成&#xff0c;这些时间序列在实际应用…

小黄人欢乐来袭,国漫萌物大集结

最近上映的《神偷奶爸》4不知道大家有没有去看&#xff0c;小黄人作为该系列电影的标志性角色&#xff0c;继续以其呆萌可爱的形象和幽默搞怪的性格赢得了观众的喜爱。 在中国动漫中&#xff0c;也有许多可爱且深受观众喜爱的萌物角色。这些角色以其独特的形象、有趣的性格和与…

数据结构day6

一、思维导图 二、模拟面试 typedef定义函数指针的方式typedef int(*p)(int,int);对void*指针的理解&#xff0c;相关应用万能指针&#xff0c;可以定义形参用来接收任意类型的指针变量&#xff0c;也可以定义函数用来返回任意类型的指针变量例如malloc函数在堆区申请内存&…

HTTP协议和RPC协议的区别是什么

从功能层面来说&#xff0c;HTTP协议是一个应用层的超文本传输协议&#xff0c;它是万维网数据通信的一个基础&#xff0c;主要服务在网页端和服务端的一个数据传输上。而RPC是一个远程过程调用协议&#xff0c;它是定位在实现分布式应用之间的一个数据通信&#xff0c;屏蔽了通…

SpringBoot入门:如何新建SpringBoot项目(保姆级教程)

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…

请求重定向后,端口自动去掉的问题

遇到的问题如下&#xff1a; nginx代理端口 1443 -> 9001访问&#xff1a; localhost:9001/index.html会重定向到 localhost:9001/login.html 没问题&#xff0c;因为没有登录。但是访问&#xff1a; localhost:1443/index.html会重定向到 localhost/login.html这个重定向的…

C# 怎么判断两个字符串相等

在C#中&#xff0c;可以使用多种方法来判断两个字符串在忽略大小写的情况下是否相等。以下是几种常用的方法&#xff1a; 1. 使用 String.Equals 方法 String.Equals 方法允许你指定一个 StringComparison 枚举值来控制比较的行为。 string str1 "hello"; string…

数据挖掘-数据预处理

来自&#x1f96c;&#x1f436;程序员 Truraly | 田园 的博客&#xff0c;最新文章首发于&#xff1a;田园幻想乡 | 原文链接 | github &#xff08;欢迎关注&#xff09; 文章目录 3.3.1 数据的中心趋势平均数和加权平均数众数&#xff0c;中位数和均值描述数据的离散程度 &a…

VSCode | 修改编辑器注释的颜色

1 打开VsCode的设置进入settings.json 2 添加如下代码 "editor.tokenColorCustomizations": {"comments": "#17e917"},3 保存即可生效

Linux源码阅读笔记14-IO体系结构与访问设备

IO体系结构 与外设通信通常称为输入输出&#xff0c;一般缩写为I/O。在实现外设IO的时候&#xff0c;内核必须处理三个可能出现的问题&#xff1a; 必须根据具体的设备类型和模型&#xff0c;使用各种方法对硬件寻址。内核必须向用户应用程序和系统工具提供访问各种设备的方法…

hugging face 使用教程———快速入门

概述 本篇存在的意义是快速介绍hugging face使用&#xff0c;梳理主要部件&#xff0c;梳理易混淆概念。原因是&#xff1a;目前hugging face的使用&#xff0c;官方放在了3个地方&#xff08;参考链接部分&#xff09;&#xff1a;使用文档、NLP教程、Transformers git的readm…

手写简化版 Promise 详解

手写简化版 Promise 详解 在JavaScript中&#xff0c;Promise 是一种用于处理异步操作的强大机制。虽然现代JavaScript环境&#xff08;如Node.js和浏览器&#xff09;已经内置了功能完备的 Promise 实现&#xff0c;但了解如何手写一个简化版的 Promise 可以帮助我们深入理解其…

Vue3+Element Plus 实现table表格中input的验证

实现效果 html部分 <template><div class"table"><el-form ref"tableFormRef" :model"form"><el-table :data"form.detailList"><el-table-column type"selection" width"55" align&…

基于springboot+vue+uniapp的养老院系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

repo 工具安装和使用教程(windows+gitee)

repo是什么 官方的定义&#xff1a;Repo是谷歌用python脚本写的调用git的一个脚本&#xff0c;可以实现管理多个git库。 Android的源代码使用Repo 命令行工具来管理多个git仓库&#xff0c;大概有百多个。要想克隆和管理百多个 Git 仓库&#xff0c;不是一件简单的事情。Repo 命…

LoRaWAN网络中的chirpstack

目录 一、chirpstack介绍 二、网关与chirpstack之间的通信 三、NS与AS之间的通信 1、Protobuf 2、gRPC 一、chirpstack介绍 ChirpStack 是一个开源的 LoRaWAN 网络服务器&#xff0c;可用于 设置私有或公共 LoRaWAN 网络。ChirpStack 提供了一个 Web 界面 用于管理网关、设…

HBuilder X中配置vue-cli项目和UI库

目录 一.前端项目结构 二.在HBuilder X中搭建vue-cli项目 1. 安装node.js前端环境 2. HBuilder X创建一个vue-cli项目 3. vue-cli项目结构 4. 如何运行前端项目 5. 创建组件 6. 组件路由(页面跳转) 6.1 创建router目录 6.2 使用路由 6.3 在main.js中配置路由 6.4 路…

【IoTDB 线上小课 05】时序数据文件 TsFile 三问“解密”!

【IoTDB 视频小课】持续更新&#xff01;第五期来啦~ 关于 IoTDB&#xff0c;关于物联网&#xff0c;关于时序数据库&#xff0c;关于开源... 一个问题重点&#xff0c;3-5 分钟详细展开&#xff0c;为大家清晰解惑&#xff1a; IoTDB 的 TsFile 科普&#xff01; 了解了时序数…

安卓adb shell top 命令的使用

adb shell top 是一个在 Android 开发中常用的命令&#xff0c;它使用 Android Debug Bridge (adb) 来运行 top 命令&#xff0c;这通常用于监视 Android 设备上的进程和系统资源使用情况。 当你在命令行中输入 adb shell top 并按下回车键时&#xff0c;它会显示一个动态更新…

系统移植(三)u-boot移植 ① 相关概念

文章目录 一、u-boot概念&#xff08;一&#xff09;概念&#xff08;二&#xff09;获取u-boot源码1.从u-boot官网获取2. 从 STM官网3. 开发板厂商获取 &#xff08;三&#xff09;分析u-boot源码1. u-boot源码的目录结构2. 获取make的帮助信息3. 分析README文件 &#xff08;…