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

vue3学习3-route

创建路由器:

应用路由器:

路由展示区RouterView 和 路由跳转RouterLink:

路由组件(在路由配置文件中配置的)一般放到pages/views文件夹下

路由组件切换的时候执行的是 挂载/卸载操作 onMounted / onUnmouted

路由器两种工作模式:

1、history模式:

2、hash模式:

createHashHistory()

to的两种写法:

第二种写法可以根据路由的name和path跳转:

嵌套路由:

子级路由的path不用加 /

两种路由传参:query和params传参

1、query直接在路径中加?拼接参数

使用useRoute().query接收参数

第二种写法:

2、params传参

必须在路由配置文件中提前占位

直接在路径中传参,只能用路由中的name属性,不能用path属性

接收参数

通过props:true属性设置子组件的props,并在子组件中通过defineProps进行接收(只用params参数可用,query参数不可用)

第二种写法,如果是query参数,可以自己决定将什么作为props传递:

=

第三种写法,直接返回写死的对象

路由 replace属性

路由默认是push堆栈模式,可以加上replace替换为replace属性

编程式路由导航(脱离RouterLink实现路由跳转):

两种跳转方式,push和replace

router.push中可以和RouterLink中的to属性一样的写法,可以传query和params两种参数

重定向redirect:指定路径重定向到另一个路径

从一个响应式对象身上直接解构赋值,被赋值的变量会失去响应式,除非结构赋值时加上toRefs()

相关文章:

vue3学习3-route

创建路由器: 应用路由器: 路由展示区RouterView 和 路由跳转RouterLink: 路由组件(在路由配置文件中配置的)一般放到pages/views文件夹下 路由组件切换的时候执行的是 挂载/卸载操作 onMounted / onUnmouted 路由器两…...

C++:dfs,bfs各两则

1.木棒 167. 木棒 - AcWing题库 乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过 5050 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度。 请你设计一个程序…...

RK Android11 WiFi模组 AIC8800 驱动移植流程

RK Android WiFi模组 AIC8800 驱动移植流程 作者:Witheart更新时间:20250220 概要:本文介绍了基于 AIC8800D40 芯片的 WiFi6 模组 BL-M8800DS2-40 在 RK3568 平台上的驱动移植流程。主要涉及环境搭建、驱动代码分析、设备树修改、驱动编译配…...

深度学习-6.用于计算机视觉的深度学习

Deep Learning - Lecture 6 Deep Learning for Computer Vision 简介深度学习在计算机视觉领域的发展时间线 语义分割语义分割系统的类型上采样层语义分割的 SegNet 架构软件中的SegNet 架构数据标注 目标检测与识别目标检测与识别问题两阶段和一阶段目标检测与识别两阶段检测器…...

免费送源码:ava+springboot+MySQL 基于springboot 宠物医院管理系统的设计与实现 计算机毕业设计原创定制

摘 要 在当今社会,宠物已经成为人们生活中不可或缺的一部分,因此宠物健康和医疗问题也备受关注。为了更好地管理宠物医院的日常运营和提供优质的医疗服务,本研究设计并实现了一套基于Spring Boot框架的宠物医院管理系统。这一系统集成了多项功…...

【电机控制器】ESP32-C3语言模型——DeepSeek

【电机控制器】ESP32-C3语言模型——DeepSeek 文章目录 [TOC](文章目录) 前言一、简介二、代码三、实验结果四、参考资料总结 前言 使用工具&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、简介 二、代码 #include <Arduino.h&g…...

小型字符级语言模型的改进方向和策略

小型字符级语言模型的改进方向和策略 一、回顾小型字符级语言模型的处理流程 前文我们已经从零开始构建了一个小型字符级语言模型,那么如何改进和完善我们的模型呢?有哪些改进的方向?我们先回顾一下模型的流程: 图1 小型字符级语言模型的处理流程 (1)核心模块交互过程:…...

力扣-贪心-56 合并区间

思路 先按照左区间进行排序&#xff0c;然后初始化left和right&#xff0c;重叠时&#xff0c;更新right&#xff0c;不重叠时&#xff0c;收集区间 代码 class Solution { public:static bool cmp(vector<int> a, vector<int> b){if(a[0] b[0]){return a[1] &…...

vue 3D 翻页效果

<template><view class"swipe-container" touchstart"onTouchStart" touchmove"onTouchMove" touchend"onTouchEnd"><view class"page">初始页</view></view> </template><script&g…...

【系列专栏】银行信息系统研发外包风险管控-08

银行信息系统研发外包风险管控 在金融科技日新月异的当下&#xff0c;银行业务对信息系统的依赖程度与日俱增。为了充分利用外部专业资源&#xff0c;提升研发效率并合理控制成本&#xff0c;许多银行选择将信息系统研发外包。然而&#xff0c;这一策略在带来诸多便利的同时&a…...

[ComfyUI] 【AI】如何获得一张人物图片的优质描述

在使用ComfyUI时,获取一张人物图片的优质英文描述非常重要,尤其是在涉及图像生成、自动化标签和多模态AI任务时。以下是一个简单的流程,可以帮助你快速从一张人物图片中提取出精确且高质量的英文描述。 1. 打开 Hugging Face 网站 首先,您需要访问 Hugging Face 提供的 J…...

深度学习基础--ResNet网络的讲解,ResNet50的复现(pytorch)以及用复现的ResNet50做鸟类图像分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 如果说最经典的神经网络&#xff0c;ResNet肯定是一个&#xff0c;这篇文章是本人学习ResNet的学习笔记&#xff0c;并且用pytorch复现了ResNet50&…...

stack,queue,priority_queue学习知识点

容器适配器 在c常用的容器中&#xff0c;有的是以容器迭代器为核心&#xff0c;而有的则以容器适配器为核心。较为常用的就包括queue和stack。接下来我将简单的以queue和stack的模拟实现介绍其特点。 在以下的模拟实现中&#xff0c;class Con就是我们的容器适配器&#xff0…...

css特异性,继承性

html <div class"introduce"><div class"title">介绍</div><div class"card-box"><div class"card"><div class"title">管理</div></div></div> </div> scs…...

力扣hot100刷题——11~20

文章目录 11.滑动窗口最大值题目描述思路&#xff1a;滑动窗口单调队列code 12.最小覆盖子串题目描述思路&#xff1a;双指针/滑动窗口哈希code Ⅰcode Ⅱ 13.最大子数组和题目描述思路&#xff1a;dp/贪心code 14.合并区间题目描述思路&#xff1a;贪心code 15.轮转数组题目描…...

R语言Stan贝叶斯空间条件自回归CAR模型分析死亡率多维度数据可视化

全文链接&#xff1a;https://tecdat.cn/?p40424 在空间数据分析领域&#xff0c;准确的模型和有效的工具对于研究人员至关重要。本文为区域数据的贝叶斯模型分析提供了一套完整的工作流程&#xff0c;基于Stan这一先进的贝叶斯建模平台构建&#xff0c;帮助客户为空间分析带来…...

速通HTML

目录 HTML基础 1.快捷键 2.标签 HTML进阶 1.列表 a.无序列表 b.有序列表 c.定义列表 2.表格 a.内容 b.合并单元格 3.表单 a.input标签 b.单选框 c.上传文件 4.下拉菜单 5.文本域标签 6.label标签 7.按钮标签 8.无语义的布局标签div与span 9.字符实体 HTML…...

安装 Milvus Java SDK

本主题介绍如何为 Milvus 安装 Milvus Java SDK。 当前版本的 Milvus 支持 Python、Node.js、GO 和 Java SDK。 要求 Java&#xff08;8 或更高版本&#xff09;Apache Maven 或 Gradle/Grails 安装 Milvus Java SDK 运行以下命令安装 Milvus Java SDK。 Apache Maven &…...

云手机如何进行经纬度修改

云手机如何进行经纬度修改 云手机修改经纬度的方法因不同服务商和操作方式有所差异&#xff0c;以下是综合多个来源的常用方法及注意事项&#xff1a; 通过ADB命令注入GPS数据&#xff08;适用于技术用户&#xff09; 1.连接云手机 使用ADB工具连接云手机服务器&#xff0c;…...

牛客周赛 Round 82(思维、差分、树状数组、大根堆、前后缀、递归)

文章目录 牛客周赛 Round 82&#xff08;思维、差分、树状数组、大根堆、前后缀、递归&#xff09;A. 夹心饼干B. C. 食堂大作战&#xff08;思维&#xff09;D. 小苯的排列计数(差分、树状数组)E. 和和&#xff08;大根堆&#xff0c;前缀和&#xff09;F. 怎么写线性SPJ &…...

Akagi雀魂AI辅助工具:从麻将新手到高手的完整指南

Akagi雀魂AI辅助工具&#xff1a;从麻将新手到高手的完整指南 【免费下载链接】Akagi 支持雀魂、天鳳、麻雀一番街、天月麻將&#xff0c;能夠使用自定義的AI模型實時分析對局並給出建議&#xff0c;內建Mortal AI作為示例。 Supports Majsoul, Tenhou, Riichi City, Amatsuki,…...

Figma中文汉化插件终极指南:3分钟告别英文界面困扰

Figma中文汉化插件终极指南&#xff1a;3分钟告别英文界面困扰 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma的英文界面而烦恼吗&#xff1f;作为一名中文设计师&#xff…...

飞牛OS新手必看:用acme.sh脚本一键搞定SSL证书,告别手动更新烦恼

飞牛OS SSL证书自动化管理&#xff1a;从零到精通的acme.sh实战指南 每次看到浏览器地址栏那个红色"不安全"警告&#xff0c;心里是不是咯噔一下&#xff1f;作为飞牛OS用户&#xff0c;你可能已经意识到SSL证书的重要性&#xff0c;但又被那些晦涩的命令行和繁琐的…...

从HOGP协议到内核驱动:深入解析BlueZ连接蓝牙手柄的全链路

1. 蓝牙HID设备与HOGP协议基础 第一次接触蓝牙手柄开发时&#xff0c;我被各种专业术语搞得晕头转向。直到把整个流程拆解成几个关键环节&#xff0c;才发现原来蓝牙手柄的工作原理就像快递配送系统一样有章可循。HOGP&#xff08;HID Over GATT Profile&#xff09;本质上是个…...

三步解锁Cursor Pro:告别试用限制的终极解决方案

三步解锁Cursor Pro&#xff1a;告别试用限制的终极解决方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial re…...

EcomGPT电商大模型保姆级教程:从build/start.sh启动到多任务切换全流程图解

EcomGPT电商大模型保姆级教程&#xff1a;从build/start.sh启动到多任务切换全流程图解 1. 引言&#xff1a;电商人的AI助手&#xff0c;到底有多好用&#xff1f; 如果你是做电商的&#xff0c;每天是不是都在为这些事头疼&#xff1f; 给几百个商品写标题、写描述&#xf…...

BMP280实战指南:从硬件连接到多平台代码解析

1. BMP280传感器基础认知 第一次拿到BMP280传感器时&#xff0c;很多人会被它小巧的尺寸所迷惑——这个仅有2.5mm2.0mm0.95mm的小方块&#xff0c;却能同时测量气压和温度。我在多个气象站项目中实测发现&#xff0c;它的温度测量精度可达1℃&#xff0c;气压测量精度1hPa&…...

轻量化语义分割实践:用MobileNet重构UNet的编码器

1. 为什么需要轻量化语义分割模型 语义分割是计算机视觉领域的核心任务之一&#xff0c;它需要为图像中的每个像素分配类别标签。在实际应用中&#xff0c;比如自动驾驶、医疗影像分析、工业质检等场景&#xff0c;模型往往需要部署在资源受限的设备上。这时候传统的UNet架构就…...

WeKnora入门教程:零基础搭建个人知识管理系统

WeKnora入门教程&#xff1a;零基础搭建个人知识管理系统 1. 引言 你是不是经常遇到这样的情况&#xff1a;电脑里存了几百个文档&#xff0c;想找某个资料时却像大海捞针&#xff1f;或者团队的知识分散在各个成员的电脑里&#xff0c;新人来了根本不知道从哪里学起&#xf…...

智能代码生成多语言支持不是“加个翻译API”那么简单,20年编译器老兵带你重走LLVM+LSP+DSL三重融合之路

第一章&#xff1a;智能代码生成多语言支持方案 2026奇点智能技术大会(https://ml-summit.org) 现代智能代码生成系统需在语法解析、语义理解与代码合成三个层面实现真正的多语言正交支持&#xff0c;而非简单模板拼接。核心在于构建统一的中间表示&#xff08;IR&#xff09…...