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

Vue路由(详解)

目录

路由原理

路由到底有什么作用?

路由安装和使用(vue2)

路由跳转

跳转实例:

路由的传值和取值

 传值实例:

查询参和路由参的区别:

嵌套路由

嵌套实例:

路由守卫

守卫实例:


路由原理

路由是Vue中的一个重要的插件。

Vue是单页面应用就一个HTML页面,但是我们要实现页面的跳转效果,那么我就需要使用路由。

单页面的跳转是什么呢?实际上就是局部改变,其实还是一个单页面,只是看起来像跳转的样子。

单页应用的路由模式有两种

1、哈希模式(利用hashchange 事件监听 url的hash 的改变)

2、history模式(使用此模式需要后台配合把接口都打到我们打包后的index.html上)

路由到底有什么作用?

下图淘宝例子:底部红色框中的按钮点击的话,绿色框中的内容会发生改变,实现单页面应用

路由安装和使用(vue2)

路由下载地址上个博客写过,没下的可以去看看。

导入路由插件:

<script src="../js/vue2.7.js"></script><!--vue文件-->
<script src="../js/vue-router.js"></script><!--路由文件-->

安装路由插件到Vue中:

<script>//安装路由,前提要导入路由jsVue.use(VueRouter)
</script>

创建VueRouter对象:

var Login = Vue.extends({template:`<div>我是登录页面</div>`
});
// 创建VueRouter对象,并配置路由
var myRouter = new VueRouter({// 配置路由routes:[// 指定路由链接、路由名称、路由页面(组件){path:'/login',name:'login',component:Login}]
});

使用路由:

var app= new Vue({el:'#app',// 引入到vue 实例中,并在模板中使用<router-view>router:myRouter,template:`<div>头部<router-view></router-view><!--路由出口-->尾部</div>`
})

路由跳转

路由的跳转有两种方式:

  • 使用<router-link>标签

    <router-link to='/login'></router-link>
  • 编程式路由,使用js

    this.$router.push({path:'/login'});
    this.$router.replace({path:'/login'});

说明:

  1. this.$router.push(); 会向history中添加记录
  2. this.$router.replace();不会向history中添加记录。
  3. this.$router.go(-1)常用来做返回上一个地址。

push和replace的区别就是在跳转后,后退或前进能不能使用 

路由中的对象:

  1. this.$route 路由信息对象,只读。
  2. this.$router 路由操作对象,只写。

跳转实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">头部<router-link to="/login">登录</router-link><!--登录的标签方式--><router-link to="/person">个人</router-link><!--个人的标签方式--><button @click="toLogin">登录按钮</button><!--登录的点击事件方式--><button @click="toPerson">个人按钮</button><!--个人的点击事件方式--><!--下面是路由出口--><router-view></router-view>尾部</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>//安装路由,前提要导入路由jsVue.use(VueRouter)//创建一个登录子组件var login={template:`<div>登陆页面</div>`,}//创建一个个人子组件var person={template:`<div>个人页面</div>`,}//创建路由配置实例,主要实现 路由和子组件之间的映射var myrouter=new VueRouter({routes: [{path:'/login',name:'login',component:login},{path:'/person',name:'person',component:person}]})let app=new Vue({el:"#app",router:myrouter,methods: {toLogin(){this.$router.push({path:'/login'})},toPerson(){this.$router.replace({path:'/person'})},},})
</script>
</html>

路由的传值和取值

查询参

配置。查询参可以和path属性匹配,也可以和name属性匹配。

<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>

或者

<router-link :to="{name:'login',query:{id:queryid}}"></router-link>

或者

this.$router.push({path:'/login',query:{id:this.queryid}});

取参

// 此代码可以写到子组件的钩子函数中
this.$route.query.id

路由参

配置路由规则

var router = new VueRouter({routers:[// 需要在配置路由规则时,使用冒号指定参数{name:'login',path:'/login/:id',component:LoginVue}]
});

配置。意:在这里path和params两个参数不能同时使用,

路由参配置的时候要使用name,因为path会根据参数的不同会改变。

<router-link :to="{name:'login',params:{id:paramId}}"></router-link>

或者

this.$router.push({name:'login',params:{id:this.paramId}});

取参

// 此代码可以写到子组件的钩子函数中
this.$route.params.id

 传值实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">头部<router-link :to="{path:'/login',query:{id:loginId}}">登录query-link方式</router-link><button @click="toLogin">登录query-按钮方式</button><router-link :to="{name:'person',params:{id:personId}}">个人params-link方式</router-link><button @click="toPerson">个人params-按钮方式</button><br><router-view></router-view><!--路由出口-->尾部</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>//安装路由,前提要导入路由jsVue.use(VueRouter)var login={template:`<div>登陆页面</div>`,mounted() {console.log(this.$route.query.id);},}//创建一个个人子组件var person={template:`<div>个人页面</div>`,mounted() {console.log(this.$route.params.id);},}//创建路由配置实例,主要实现 路由和子组件之间的映射var myrouter=new VueRouter({routes: [{path:'/login',name:'login',component:login},{path:'/person/:id',name:'person',component:person}]})let app=new Vue({el:"#app",router:myrouter,data() {return {loginId:66,personId:33}},methods: {toLogin(){this.$router.push({path:'/login',query:{id:this.loginId}})},toPerson(){this.$router.push({name:'person',params:{id:this.personId}})},},})
</script>
</html>

查询参和路由参的区别:

在地址栏参数的不同

查询参:                                                路由参:

 大家会出现的问题:

相同路由,但参数不同。造成页面不刷新的问题,只需要给路由出口加一个属性就行。

<router-view :key="$route.fullPath"></router-view>

嵌套路由

路由间有层级关系。他们在模板中也有嵌套关系。

可以一次性配置多个路由。

嵌套实例:

实例里面写的都有注释方便大家理解,对于不理解的地方大家多看几遍,或许就能理解了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><router-view></router-view><!--路由出口--></div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>Vue.use(VueRouter);//导航组件let nav={template:`<div><router-link :to="{name:'nav.index'}">首页</router-link><router-link :to="{name:'nav.person'}">个人</router-link><router-link :to="{name:'nav.message'}">消息</router-link><router-view></router-view><!--导航组件的路由出口--></div>`}//主页面子组件let index={template:`<div>主页面</div>`}//个人页面子组件let person={template:`<div>个人页面</div>`}//消息页面子组件let message={template:`<div>消息页面</div>`}let router=new VueRouter({routes:[{path:'/nav',name:'nav',component:nav,children:[//配置二级路由{path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由{path:'index',name:'nav.index',component:index},{path:'person',name:'nav.person',component:person},{path:'message',name:'nav.message',component:message},]},{path:'',redirect:'/nav'//默认显示页面链接是/nav的路由}]})let app = new Vue({el:'#app',router,//这个地方使用的是简写根据ES6新语法,对象名和参数相同可以直接使用对象名。});
</script>
</html>

路由守卫

可以做登录的验证判断,购物车是否购买后跳转页面判断。

使用路由的钩子函数beforeEach实现

守卫实例:

我将路由守卫放在了刚才的嵌套路由的实例里面,作用是判断路径是否是首页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><router-view></router-view><!--路由出口--></div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>Vue.use(VueRouter);//导航子组件let nav={template:`<div><router-link :to="{name:'nav.index'}">首页</router-link><router-link :to="{name:'nav.person'}">个人</router-link><router-link :to="{name:'nav.message'}">消息</router-link><router-view></router-view><!--导航组件中的路由出口--></div>`}//主页面子组件let index={template:`<div>主页面</div>`}//个人页面子组件let person={template:`<div>个人页面</div>`}//消息页面子组件let message={template:`<div>消息页面</div>`}let router=new VueRouter({routes:[{path:'/nav',name:'nav',component:nav,children:[//配置二级路由{path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由{path:'index',name:'nav.index',component:index},{path:'person',name:'nav.person',component:person},{path:'message',name:'nav.message',component:message},]},{path:'',redirect:'/nav'//默认显示页面链接是/nav的路由}]})let app = new Vue({el:'#app',router,//这个地方使用的是简写根据ES6新语法,对象名和参数相同可以直接使用对象名。mounted() {this.$router.beforeEach((to,from,next)=>{console.log(to);if(to.path=='/nav/index'){// 跳转到目标路由next();}else{//如果路径不对的话延时两秒再进入setTimeout(function(){next();},2000);}});}});
</script>
</html>

相关文章:

Vue路由(详解)

目录 路由原理 路由到底有什么作用&#xff1f; 路由安装和使用&#xff08;vue2&#xff09; 路由跳转 跳转实例&#xff1a; 路由的传值和取值 传值实例&#xff1a; 查询参和路由参的区别&#xff1a; 嵌套路由 嵌套实例&#xff1a; 路由守卫 守卫实例&#xff1…...

打开软件提示msvcp140.dll丢失的解决方法,msvcp140主要丢失原因

今天&#xff0c;我将为大家介绍一种非常常见的问题——msvcp140.dll丢失。这个问题可能会导致许多应用程序无法正常运行&#xff0c;甚至崩溃。但是&#xff0c;请不要担心&#xff0c;我会为大家提供5种解决方法&#xff0c;帮助大家轻松解决问题。 首先&#xff0c;我们来看…...

关于路由器和DNS解析的一些新理解

其实我本人对于交换机和路由器这些网络硬件是比较感兴趣的&#xff0c;也在一点一点的学习相关知识&#xff0c;每次解决一个问题&#xff0c;就让我对一些事情有新的思考。。 今天前台同事&#xff0c;的机器突然上不了网&#xff0c;&#xff0c;和领导一起去看了一波&#…...

vscode 与 C++

序 具体流程的话&#xff0c;官方文档里都有的&#xff1a;C programming with Visual Studio Code 浏览器下载一个mingw64&#xff0c;解压&#xff0c;配置环境变量vscode里安装c相关的插件没了 第一步只看文字&#xff0c;可能有点抽象&#xff0c;相关视频&#xff1a; …...

水果flstudio好用吗?中文版FL21最新版本如何下载

FL Studio21版是一款功能强大的音乐制作软件&#xff0c;广泛应用于电子音乐、流行音乐、电影配乐等领域。它提供了丰富多样的音频合成和编辑工具&#xff0c;使音乐制作变得更加灵活多样。无论是初学者还是专业音乐制作人&#xff0c;都可以通过直观的界面和丰富的音频特效来实…...

PHP is_array()函数详解,PHP判断是否为数组

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 is_array 一、基本使用二、空数组三、同时判断多个…...

面试题-React(三):什么是JSX?它与常规JavaScript有什么不同?

在React的世界中&#xff0c;JSX是一项引人注目的技术&#xff0c;它允许开发者在JavaScript中嵌套类似HTML的标签&#xff0c;用于描述UI组件的结构。本篇博客将通过丰富的代码示例&#xff0c;深入探索JSX语法&#xff0c;解析其在React中的用法和优势。 一、JSX基础语法 在…...

纯前端实现图片上传七牛云

首先安装下依赖&#xff1a; npm install qiniu-js crypto-js 然后封装一下 uploaderHelper.ts import * as qiniu from qiniu-js; // ts-ignore import CryptoJS from crypto-js// 请求接口上传图片 export function uploadFile(file: File) {const uptoken getToken(你的…...

win10+wsl2+Ubuntu20.2+Pycharm+WSL解释器

目的&#xff1a;创建一个ubuntu系统下的python解释器&#xff0c;作为win平台下的pycharm的解释器。 这样做的好处是可以直接在win系统里操作文件&#xff0c;相比于linux方便一点&#xff0c;而且也不用对wsl的子系统进行迁移。 一、安装前准备 1. 设置-Windows更新-window…...

EL与JSTL

目录 EL EL语法 EL运算符 JSTL JSTL标签分类 JSP脚本&#xff1a;代码结构混乱、脚本与HTML 混合易出错、代码不易维护。 EL表达式&#xff1a;优化程序代码&#xff0c;增加程序可读性。 EL EL语法 EL表达式 ${ EL 表达式 } EL操作符 操作符“ . ” 获取对象的属性&a…...

【Linux】动态库和静态库

动态库和静态库 软链接硬链接硬链接要注意 自定义实现一个静态库(.a)解决、使用方法静态库的内部加载过程 自定义实现一个动态库&#xff08;.so&#xff09;动态库加载过程 静态库和动态库的特点 软链接 命令:ln -s 源文件名 目标文件名 软链接是独立连接文件的&#xff0c;他…...

R语言:联合多指标的ROC曲线

# 加载数据和包rm(list=ls())library(pROC)library(ggplot2)setwd("C:/Users/syy/Desktop/MRI_lab/")data<- read.csv("test1.csv", header = T)data$Groups...

将一个树形结构的数据平铺成一个一维数组(vue3)

一、需求描述 由于自带组件库没有具体完善,无法实现像element-ui这种可以多选选择任意一级的选项,也就是说,选择父级的时候不会联动选择子级的全部 例如: 所以,才会出现【二、案例场景】类似的场景,可以用来多选 ,并可以实现单选父级而不关联子级,选择了将树状数据进…...

OSCS开源安全周报第 56 期:Apache Airflow Spark Provider 任意文件读取漏洞

本周安全态势综述 OSCS 社区共收录安全漏洞 3 个&#xff0c;公开漏洞值得关注的是 Apache NiFi 连接 URL 验证绕过漏洞(CVE-2023-40037)、PowerJob 未授权访问漏洞(CVE-2023-36106)、Apache Airflow Spark Provider 任意文件读取漏洞(CVE-2023-40272)。 针对 NPM 、PyPI 仓库…...

CleanMyMac2024永久版Mac清理工具

Mac电脑作为相对封闭的一个系统&#xff0c;它会中毒吗&#xff1f;如果有一天Mac电脑产生了疑似中毒或者遭到恶意不知名攻击的现象&#xff0c;那又应该如何从容应对呢&#xff1f;这些问题都是小编使用Mac系统一段时间后产生的疑惑&#xff0c;通过一番搜索研究&#xff0c;小…...

软考高级系统架构设计师(一)计算机硬件

【原文链接】软考高级系统架构设计师&#xff08;一&#xff09;计算机硬件 1.1 计算机硬件组成 1.1.1 计算机的基本硬件组成 运算器控制器存储器输入设备输出设备 1.1.2 中央处理单元&#xff08;CPU&#xff09; 中央处理单元&#xff08;CPU&#xff09;的组成 运算器…...

bat文件中自定义cmd命令;执行完退出命令提示符窗口

1. bat中启动cmd命令 start cmd /k " cmd中命令行里自定义的命令 " 2.编写规则 start cmd /k "命令1 & 命令2 & 命令3" (无论前面命令是否成功, 后面都会执行start cmd /k "命令1 && 命令2 && 命令3 " (仅…...

深度学习的经典算法的论文、解读和代码实现

文章目录 CNN网络的经典算法LeNet-5AlexNetVGGInceptionInception-v1(GoogLeNet)BN-Inception ResNetR-CNNR-CNNFast R-CNNFaster R-CNN YOLOYOLO v1YOLO v2YOLO v3YOLO v4 RNN的经典算法RNNGRULSTMEncoder-DecoderAttentionTransformer CNN网络的经典算法 LeNet-5 来源论文&…...

开源TTS+gtx1080+cuda11.7+conda+python3.9吊打百度TTS

一、简介 开源项目&#xff0c;文本提示的生成音频模型 https://github.com/suno-ai/bark Bark是由Suno创建的基于变换器的文本到音频模型。Bark可以生成极为逼真的多语种演讲以及其他音频 - 包括音乐、背景噪音和简单的声音效果。该模型还可以产生非言语沟通&#xff0c;如…...

【私有GPT】CHATGLM-6B部署教程

【私有GPT】CHATGLM-6B部署教程 CHATGLM-6B是什么&#xff1f; ChatGLM-6B是清华大学知识工程和数据挖掘小组&#xff08;Knowledge Engineering Group (KEG) & Data Mining at Tsinghua University&#xff09;发布的一个开源的对话机器人。根据官方介绍&#xff0c;这是…...

基于“R语言+遥感“水环境综合评价方法教程

详情点击链接&#xff1a;基于"R语言遥感"水环境综合评价方法教程 一&#xff1a;R语言 1.1 R语言特点&#xff08;R语言&#xff09; 1.2 安装R&#xff08;R语言&#xff09; 1.3 安装RStudio&#xff08;R语言&#xff09; &#xff08;1&#xff09;下载地址…...

To_Heart—题解——P6234 [eJOI2019] T形覆盖

link. 突然很想写这篇题解。虽然题目不算难。 考场只有30分是为什么呢&#xff1f;看来是我没有完全理解这道题目吧&#xff01; 首先很明显的转换是&#xff0c;把 T 型覆盖看成十字形&#xff0c;再考虑最后减去某一块的贡献。 然后然后直接往原图上面放十字形!对于每一个…...

[软件工具]精灵标注助手目标检测数据集格式转VOC或者yolo

有时候我们拿到一个数据集发现是xml文件格式如下&#xff1a; <?xml version"1.0" ?> <doc><path>C:\Users\Administrator\Desktop\test\000000000074.jpg</path><outputs><object><item><name>dog</name>…...

Spring BeanName自动生成原理

先看代码演示 项目先定义一个User类 public class User {private String name;Overridepublic String toString() {return "User{" "name" name \ };}public String getName() {return name;}public void setName(String name) {this.name name;} }…...

论文阅读_图形图像_U-NET

name_en: U-Net: Convolutional Networks for Biomedical Image Segmentation name_ch: U-Net&#xff1a;用于生物医学图像分割的卷积网络 addr: http://link.springer.com/10.1007/978-3-319-24574-4_28 doi: 10.1007/978-3-319-24574-4_28 date_read: 2023-02-08 date_publi…...

基于热交换算法优化的BP神经网络(预测应用) - 附代码

基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.热交换优化BP神经网络2.1 BP神经网络参数设置2.2 热交换算法应用 4.测试结果&#xff1a;5.Matlab代…...

基于秃鹰算法优化的BP神经网络(预测应用) - 附代码

基于秃鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于秃鹰算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.秃鹰优化BP神经网络2.1 BP神经网络参数设置2.2 秃鹰算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…...

2.文章复现《热电联产系统在区域综合能源系统中的定容选址研究》(附matlab程序)

0.代码链接 1.简述 光热发电是大规模利用太阳能的新兴方式&#xff0c;其储热系 统能够调节光热电站的出力特性&#xff0c;进而缓解光热电站并网带来的火电机组调峰问题。合理配置光热电站储热容量&#xff0c;能够 有效降低火电机组调峰成本。该文提出一种光热电站储热容 量配…...

如何开启esxi主机的ssh远程连接

环境&#xff1a;esxi主机&#xff0c;说明&#xff1a;esxi主机默认ssh是不开启的&#xff0c;需要人工手动启动&#xff0c;也可以设置同esxi主机一起开机启动。 1、找到esxi主机&#xff0c;点击“配置”那里&#xff0c;再点击右边的属性&#xff0c;如图所示&#xff1a; …...

Android Studio实现解析HTML获取json,解析json图片URL,将URL存到list,进行瀑布流展示

目录 效果build.gradle&#xff08;app&#xff09;添加的依赖&#xff08;用不上的可以不加&#xff09;AndroidManifest.xml错误activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL 效果 build.gradle&#xff08;app&#xff09;添加的依赖&…...

Centos7 交叉编译QT5.9.9源码 AArch64架构

环境准备 centos7 镜像 下载地址&#xff1a;http://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/ aarch64交叉编译链 下载地址&#xff1a;https://releases.linaro.org/components/toolchain/binaries/7.3-2018.05/aarch64-linux-gnu/ QT5.9.9源代码 下载地址&#xff1…...

爬虫逆向实战(二十)--某99网站登录

一、数据接口分析 主页地址&#xff1a;某99网站 1、抓包 通过抓包可以发现登录接口是AC_userlogin 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”可以发现txtPassword和aws是加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无…...

【C# 基础精讲】LINQ to Objects查询

LINQ to Objects是LINQ技术在C#中的一种应用&#xff0c;它专门用于对内存中的对象集合进行查询和操作。通过使用LINQ to Objects&#xff0c;您可以使用统一的语法来查询、过滤、排序、分组等操作各种.NET对象。本文将详细介绍LINQ to Objects的基本概念、常见的操作和示例&am…...

【力扣】209. 长度最小的子数组 <滑动窗口>

【力扣】209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的连续子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&a…...

帮助中心应该用什么工具做?

在线帮助中心是指一个位于互联网上的资源平台&#xff0c;提供给用户获取产品或服务相关信息、解决问题以及获取技术支持的渠道。它通常包含了组织化的知识库、常见问题解答&#xff08;FAQ&#xff09;、操作指南、教程视频、用户手册等内容。在线帮助中心的主要目标是为用户提…...

前端面试:【跨域与安全】跨域问题及解决方案

嗨&#xff0c;亲爱的Web开发者&#xff01;在构建现代Web应用时&#xff0c;跨域问题和安全性一直是不可忽视的挑战之一。本文将深入探讨跨域问题的背景以及解决方案&#xff0c;以确保你的应用既安全又能与其他域名的资源进行互操作。 1. 什么是跨域问题&#xff1f; 跨域问…...

【SQL中DDL DML DQL DCL所包含的命令】

SQL中DDL DML DQL DCL所包含的命令 关于DDL、DML、DQL、DCL的定义和适用范围如下&#xff1a; 数据定义语言&#xff08;Data Definition Language&#xff0c;DDL&#xff09;&#xff1a; DDL用于创建、修改和删除数据库中的表、视图、索引等对象。它的主要命令包括CREATE、A…...

LeetCode150道面试经典题-- 二叉树的最大深度(简单)

1.题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 2.示例 3.思路 深度优先遍历 一个二叉树要查询到最大深度&#xff0c;可以将问题转为从根节点出发&#xff0c;查看左右子树的最大深度&am…...

【C++11】future和async等

C11的future和async等关键字 1.async和future的概念 std::async 和 std::future 是 C11 引入的标准库功能&#xff0c;用于实现异步编程&#xff0c;使得在多线程环境中更容易处理并行任务。它们可以帮助你在不同线程中执行函数&#xff0c;并且能够方便地获取函数的结果。 在…...

Linux 系统下 GDB 调试器的使用

文章目录 简介GDB 的介绍GDB 的使用 GDB 常用命令及示例查看相关操作断点相关操作运行相关操作变量相关操作分隔窗口操作 简介 GDB 的介绍 GDB 是 GNU 调试程序&#xff0c;是用来调试 C 和 C 程序的调试器。它可以让程序开发者在程序运行时观察程序的内部结构和内存的使用情况…...

个人首次使用UniAPP使用注意事项以及踩坑

个人首次使用UniAPP 使用注意事项以及踩坑 自我记录 持续更新 1.vscode 插件 uni-create-view 快速nui-app页面的 uni-helper uni-app代码提示的 uniapp小程序扩展 鼠标悬停查文档 Error Lens 行内提示报错 "types": ["dcloudio/types", "mini…...

VSCode 如何解决 scanf 的输入问题——Code is already running!

文章如何使用 VSCode 软件运行C代码中已经介绍了如何在 VSCode 软件中运行C代码&#xff0c;但最近在使用 scanf 想从键盘输入时&#xff0c;运行代码后显示“Code is already running!”&#xff0c;如下图所示&#xff0c;在输出窗口是无法通过键盘输入的。 解决办法如下&am…...

短视频seo源码矩阵系统开源---代码php分享

前言&#xff1a;短视频seo源码 短视频seo矩阵系统源码私有化部署 短视频seo源码 短视频seo矩阵系统源码私有化怎么部署&#xff1f; 首先我们来给大家普及一下什么是短视频seo矩阵系统&#xff1f;视频矩阵分为多平台矩阵与一个平台多账号矩阵&#xff0c;加上seo排名优化&…...

【docker】中文无法显示输入等问题解决方法

every blog every motto: You can do more than you think. csdn: https://blog.csdn.net/weixin_39190382?typeblog ID: 胡侃有料 0. 前言 docker 路径中文不显示&#xff0c;无法输入中文问题解决方法 1. 解决方法 1.1 临时解决 打开etc/profile文件&#xff0c;末尾添…...

leetcode 1035. 不相交的线

2023.8.25 本题可以转化为&#xff1a;求两数组的最长公共子序列。 进而可以用dp算法解决。 方法类似于这题最长公共子序列 。 代码如下&#xff1a; class Solution { public:int maxUncrossedLines(vector<int>& nums1, vector<int>& nums2) {vector<…...

Hystrix: 服务降级

cloud是基础&#xff0c;eureka是服务注册和发现&#xff0c;consumer是消费者去消费provider里的东西&#xff0c;消费方式就是Feign和Ribbon&#xff0c;feign 接口消费&#xff0c;ribbon Rest消费 服务降级发生在客户端&#xff0c;客户端因为请求关闭的服务器&#xff0…...

高精度运算(加减乘除乘法)

所谓高精度&#xff0c;就是大数的运算&#xff0c;这个大数可能是要远远超过现有数据类型的最大范围。如果我们想进行这样的运算&#xff0c;就要掌握计算的原理——竖式运算。 加法 我们这里先简单考虑非负数的加法&#xff0c;竖式这么列对吧&#xff1a; ①存储 我们如何…...

Mysql数据库技术知识整理

Mysql的知识点目录 重点&#xff1a;架构,引擎,索引&#xff0c;锁机制,事务机制,日志机制&#xff0c;集群,调优 3、Mysql索引 索引概念 覆盖索引&#xff1a; 条件列和结果列都在索引中索引下推&#xff1a; 查询会先过滤条件列&#xff0c;然后回表查数据最左前缀匹配&am…...

SpringBoot整合Mybatis 简单试用

1. 导入依赖 我使用MySQL&#xff0c;需要导入MySQL的驱动依赖此外要在SpringBoot中使用Mybatis&#xff0c;则需要导入Mybatis启动器 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifact…...

SpringBoot案例-配置文件-yml配置文件

配置格式 SpringBoot提供了多种属性配置方式 application.propertiesapplication.ymlapplication.yaml常见配置文件格式对比 XML&#xff08;臃肿&#xff09; <configuration><database><host>localhost</host><port>3306</port><use…...