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

Vue 两种导航方式

目录

一、声明式导航

二、编程式导航

三、两句话总结


一、声明式导航

1. 传参跳转:

<router-link :to="/user?name=CHEEMS&id=114514">Query传参
</router-link><router-link :to="/user?参数名1=参数值1&参数名2=参数值2&...">Query传参
</router-link>

2. 接参:

export default {created() {console.log(this.$route.query); // { id: "114514", name: "CHEEMS" }console.log(this.$route.query.id); // "114514"console.log(this.$route.query.name); // "CHEEMS"}
}

二、编程式导航

1. 传参跳转:

<router-link :to="/user/114514/CHEEMS">Params传参
</router-link><router-link :to="/user/参数值1/参数值2/...">Params传参
</router-link>

需要额外配置路由: 

// 路由配置
routes: [{ path: '/home/:id/:name', component: Home },{ path: '/user/:id/:name?', component: User } // 参数名后面加个?表示参数可选]// 路由配置
routes: [{ path: '/home/:参数名1/:参数名2/:...', component: Home },{ path: '/user/:参数名1/:参数名2?/:...', component: User } // 参数名后面加个?表示参数可选]

2. 接参:

export default {created() {console.log(this.$route.params); // { id: "114514", name: "CHEEMS" }console.log(this.$route.params.id); // "114514"console.log(this.$route.params.name); // "CHEEMS"}
}

三、两句话总结

  • Query适合传临时参数,如搜索、分页、筛选等。
  • Params适合传固定资源路径,如用户ID、文章标题等。

相关文章:

Vue 两种导航方式

目录 一、声明式导航 二、编程式导航 三、两句话总结 一、声明式导航 1. 传参跳转&#xff1a; <router-link :to"/user?nameCHEEMS&id114514">Query传参 </router-link><router-link :to"/user?参数名1参数值1&参数名2参数值2&a…...

HTTP 的发展史:从前端视角看网络协议的演进

别再让才华被埋没&#xff0c;别再让github 项目蒙尘&#xff01;github star 请点击 GitHub 在线专业服务直通车GitHub赋能精灵 - 艾米莉&#xff0c;立即加入这场席卷全球开发者的星光革命&#xff01;若你有快速提升github Star github 加星数的需求&#xff0c;访问taimili…...

Spring 必会之微服务篇(2)

经过上一篇文章的介绍,应该对微服务有了基本的认识,以及为什么要用微服务和微服务要面临的挑战和对应的解决问题,这一期继续聊聊关于微服务的相关知识。 服务拆分 为什么拆 对于大多数的小型项目来说,一般是先采用单体架构,但是随着后面的用户规模变大,业务越来越复杂…...

21.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--身份认证服务拆分规划

从这篇文章开始我们将开始一步一步的拆分现有的单体应用孢子记账项目。按照上一篇文章中的介绍&#xff0c;我们首先把身份认证服务拆分出来。 一、功能分析 在当前的单体应用中&#xff0c;身份认证服务主要负责用户认证、授权以及角色权限管理等核心功能。 在拆分之前&…...

人工智能100问☞第19问:什么是专家系统?

目录 一、通俗解释 二、专业解析 ​三、权威参考 专家系统是基于​​知识库​​(存储专家经验与规则)和​​推理机​​(模拟专家逻辑判断)的人工智能程序,能在特定领域(如医疗诊断、工业控制)高效解决复杂问题。 一、通俗解释 ​​专家系统​​就像个“智能版老师傅…...

AutoGen+Deepseek+chainlit的简单使用

AutoGen 的应用场景 AutoGen 作为一个强大的多智能体协作框架&#xff0c;可用于多种复杂任务&#xff1a; 自动化工作流&#xff1a;构建由多个智能体组成的流水线&#xff0c;例如数据收集、分析、报告生成复杂问题分解&#xff1a;将难题拆解为子任务&#xff0c;分配给不…...

贪心算法专题(Part1)

目录 1. 贪心算法简介 2. 柠檬水找零 3. 将数组和减半的最少操作次数 4. 递增的三元子序列 5. K次取反后最大化的数组和 6. 增减字符串匹配 7. 分发饼干 8. 整数替换 1. 贪心算法简介 2. 柠檬水找零 题目链接&#xff1a;860. 柠檬水找零 - 力扣&#xff08;LeetCode…...

PyTorch API 4 - 分布式通信、分布式张量

文章目录 分布式通信包 - torch.distributed后端支持PyTorch 内置的后端选择哪个后端&#xff1f;常见环境变量选择使用的网络接口其他NCCL环境变量 基础概念初始化返回类型&#xff1a;boolTCP初始化共享文件系统初始化环境变量初始化方法 初始化后操作关闭处理重新初始化 组D…...

《类和对象(中)》

引言&#xff1a; 上次我们主要学习了类的相关知识&#xff0c;今天我们就来学习类和对象(中)&#xff0c;今天也会用到之前学习过的东西&#xff0c;可以说是前面知识的结合&#xff0c;较前面会难一点&#xff08;打个预防针&#xff09;。 一&#xff1a;类的默认成员函数…...

SSH终端登录与网络共享

SSH 是较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议 注意 SSH终端登录的前提是&#xff1a;电脑和板卡都能够通过网络相连接及通信 与连接互联网不一样&#xff0c;SSH可以不用互联网&#xff0c;只要电脑和板卡组成一个小型网络即可 网络方案 如果您…...

n8n系列(5):LangChain与大语言模型应用

引言 n8n作为一个强大的工作流自动化平台,可以通过集成LangChain框架,为用户提供了便捷地利用OpenAI、Azure OpenAI等大语言模型的能力。 本文将深入探讨n8n中的AI集成功能,特别是LangChain节点的使用,以及如何构建智能化的工作流程来解决实际业务问题。 1. n8n的AI集成概…...

springboot3+vue3融合项目实战-大事件文章管理系统-更新用户信息

在一下三个代码处进行修改 在UserController里面增加uadate方法 PutMapping ("/update")public Result update(RequestBody Validated User user){userService.update(user);return Result.success();}在userservice中增加update方法 void update(User user); 然…...

20250510-查看 Anaconda 配置的镜像源

打开 Anaconda Prompt 查看 Anaconda 当前配置的镜像源&#xff0c;使用命令 conda config --show channels这将显示当前配置的通道&#xff08;channels&#xff09;&#xff0c;即镜像源列表。 此外&#xff0c;还可以使用 conda config --show命令来显示conda的配置信息&…...

CDGP数据治理主观题评分标准与得分策略

1.数据模型题目评分标准 1)准确理解题目中所描述的业务逻辑和需求得[1分] 2)正确使用模型设计方法,使用信息工程、信息建模集成定义、巴克符号、陈氏符号等其中一种得[1分] 3)正确设计实体和属性,题目中涉及的实体数量为25-30个,10个以内得[2分],10-20个得[3分],25个…...

[学习]RTKLib详解:sbas.c与rtcm.c

RTKLib详解&#xff1a;sbas.c与rtcm.c 本文是 RTKLlib详解 系列文章的一篇&#xff0c;目前该系列文章还在持续总结写作中&#xff0c;以发表的如下&#xff0c;有兴趣的可以翻阅。 [学习] RTKlib详解&#xff1a;功能、工具与源码结构解析 [学习]RTKLib详解&#xff1a;pntp…...

【基础IO下】磁盘/软硬链接/动静态库

前言&#xff1a; 文件分为内存文件和磁盘文件。磁盘文件是一个特殊的存在&#xff0c;因为磁盘文件不属于冯诺依曼体系&#xff0c;而是位于专门的存储设备中。因此&#xff0c;磁盘文件存在的意义是将文件更好的存储起来&#xff0c;一边后续对文件进行访问。在高效存储磁盘…...

JAVA练习题(1) 卖飞机票

import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scnew Scanner(System.in);System.out.println("请输入飞机的票价&#xff1a;");int pricesc.nextInt();System.out.println("请输入月份&#xff1a;");…...

SpringBoot框架开发网络安全科普系统开发实现

概述 基于SpringBoot框架的网络安全科普系统开发指南&#xff0c;该系统集知识科普、案例学习、在线测试等功能于一体&#xff0c;本文将详细介绍系统架构设计、功能实现及技术要点&#xff0c;帮助开发者快速构建专业的网络安全教育平台。 主要内容 系统功能架构 本系统采…...

机器学习 day02

文章目录 前言一、TF-IDF特征词重要度特征提取二、无量纲化处理1.最大最小值归一化2.normalize归一化3.StanderScaler标准化 前言 通过今天的学习&#xff0c;我掌握了TF-IDF特征词重要度特征提取以及无量纲化处理的相关知识和用法 一、TF-IDF特征词重要度特征提取 机器学习算…...

《AI大模型应知应会100篇》第53篇:Hugging Face生态系统入门

第53篇&#xff1a;Hugging Face生态系统入门 ——从模型获取到部署的全流程实战指南 &#x1f4cc; 摘要 在人工智能快速发展的今天&#xff0c;Hugging Face已成为自然语言处理&#xff08;NLP&#xff09;领域最具影响力的开源平台之一。它不仅提供丰富的预训练模型、强大…...

计网学习笔记———网络

&#x1f33f;网络是泛化的概念 网络是泛化的概念 &#x1f342;泛化理解 网络的概念在生活中无处不在举例&#xff1a;社交网络、电话网路、电网、计算机网络 &#x1f33f;网络的定义 定义&#xff1a; 离散的个体通过通讯手段连成群体&#xff0c;实现资源的共享与交流、个…...

Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标

1、定义icon组件代码&#xff1a; <template><svg :class"svgClass" aria-hidden"true"><use :xlink:href"iconName" :fill"color"/></svg> </template><script> export default defineComponen…...

17.Excel:实用的 VBA 自动化程序

一 excel 设置 开始-选项 二 批量创建工作表 某工作簿用于保存31天的东西&#xff0c;手动创建31个工作表不方便。 A1单元格输入内容&#xff0c;或者空着。从A2单元格开始&#xff0c;一定要以字符形式的&#xff0c;不能以数值和日期形式。12345这是数值形式&#xff0c;1月…...

Kubernetes生产实战(十六):集群安全加固全攻略

Kubernetes集群安全加固全攻略&#xff1a;生产环境必备的12个关键策略 在容器化时代&#xff0c;Kubernetes已成为企业应用部署的核心基础设施。但根据CNCF 2023年云原生安全报告显示&#xff0c;75%的安全事件源于K8s配置错误。本文将基于生产环境实践&#xff0c;系统讲解集…...

Cadence学习笔记之---导入PCB板框、网表

目录 01 | 引 言 02 | 环境描述 03 | 导入PCB板框 04 | 自画PCB板框 05 | 导入PCB网表 06 | 总 结 01 | 引 言 在上一篇小记中讲述了创建PCB工程的操作步骤、PCB工程中的类与子类&#xff0c;以及Cadence颇具特色的颜色管理器。 本篇小记主要记述如何导入PCB板框、自画…...

嵌入式硬件篇---麦克纳姆轮(简单运动实现)

文章目录 前言1. 麦克纳姆轮的基本布局X型布局O型布局 2. 运动模式实现原理(1) 前进/后退前进后退 (2) 左右平移向左平移向右平移 (3) 原地旋转顺时针旋转&#xff08;右旋&#xff09;逆时针旋转&#xff08;左旋&#xff09; (4) 斜向移动左上45移动 (5) 180旋转 3. 数学原理…...

en33网络配置文件未托管

从 nmcli device status 的输出可以看到&#xff0c;所有网络设备&#xff08;包括 ens33&#xff09;都处于 "未托管"&#xff08;unmanaged&#xff09;状态&#xff0c;这导致 NetworkManager 和传统的 network.service 都无法管理网络接口&#xff0c;从而引发 n…...

嵌入式学习--江协51单片机day4

昨天周五没有学习&#xff0c;因为中午没有睡觉&#xff0c;下午和晚上挤不出整块的时间。周日有考试今天也没有学很多啊&#xff0c;但以后周末会是学一天&#xff0c;另一天休息和写周总结。 今天学了串口通信和LED点阵屏&#xff0c;硬件原理是真的很迷&#xff0c;一但想搞…...

Hadoop 2.x设计理念解析

目录 一、背景 二、整体架构 三、组件详解 3.1 yarn 3.2 hdfs 四、计算流程 4.1 上传资源到 HDFS 4.2 向 RM 提交作业请求 4.3 RM 调度资源启动 AM 4.4 AM运行用户代码 4.5 NodeManager运行用户代码 4.6 资源释放 五、设计不足 一、背景 有人可能会好奇&#xf…...

diy装机成功录

三天前&#xff0c;我正式开启了这次装机之旅&#xff0c;购入了一颗性能强劲的 i5-12400 CPU&#xff0c;一块绘图能力出色的 3060ti 显卡&#xff0c;还有技嘉主板、高效散热器、16G 内存条、2T 固态硬盘&#xff0c;以及气派的机箱和风扇&#xff0c;满心期待能亲手打造一台…...

睿思量化小程序

睿思量化小程序是成都睿思商智科技有限公司最新研发和运营的金融数据统计分析工具&#xff0c;旨在通过量化指标筛选与多策略历史回测&#xff0c;帮助用户科学配置基金资产&#xff0c;成为个人投资者与机构用户的“智能化财富管家”。 核心功能&#xff1a;数据驱动决策&…...

STM32实现九轴IMU的卡尔曼滤波

在嵌入式系统中&#xff0c;精确的姿态估计对于无人机、机器人和虚拟现实等应用至关重要。九轴惯性测量单元&#xff08;IMU&#xff09;通过三轴加速度计、陀螺仪和磁力计提供全面的运动数据。然而&#xff0c;这些传感器数据常伴随噪声和漂移&#xff0c;单独使用无法满足高精…...

JS DOM操作与事件处理从入门到实践

对于前端开发者来说&#xff0c;让静态的 HTML 页面变得生动、可交互是核心技能之一。实现这一切的关键在于理解和运用文档对象模型 (DOM) 以及 JavaScript 的事件处理机制。本文将带你深入浅出地探索 DOM 操作的奥秘&#xff0c;并掌握JavaScript 事件处理的方方面面。 目录 …...

Hive表JOIN性能问

在处理100TB的Hive表JOIN性能问题时&#xff0c;需采用分层优化策略&#xff0c;结合数据分布特征、存储格式和计算引擎特性。以下是系统性优化方案&#xff1a; 1. 数据倾斜优化&#xff08;Skew Join&#xff09; 1.1 识别倾斜键 方法&#xff1a;统计JOIN键的分布频率&…...

关键点检测--使用YOLOv8对Leeds Sports Pose(LSP)关键点检测

目录 1. Leeds Sports Pose数据集下载2. 数据集处理2.1 获取标签2.2 将图像文件和标签文件处理成YOLO能使用的格式 3. 用YOLOv8进行训练3.1 训练3.2 预测 1. Leeds Sports Pose数据集下载 从kaggle官网下载这个数据集&#xff0c;地址为link&#xff0c;下载好的数据集文件如下…...

2025年客运从业资格证备考单选练习题

客运从业资格证备考单选练习题 1、从事道路旅客运输活动时&#xff0c;应当采取必要措施保证旅客的人身和财产安全&#xff0c;发生紧急情况时&#xff0c;首先应&#xff08; &#xff09;。 A. 抢救财产 B. 抢救伤员 C. 向公司汇报 答案&#xff1a;B 解析&#xff1a;…...

QMK自定义4*4键盘固件创建教程:最新架构详解

QMK自定义4*4键盘固件创建教程&#xff1a;最新架构详解 前言 通过本教程&#xff0c;你将学习如何在QMK框架下创建自己的键盘固件。QMK是一个强大的开源键盘固件框架&#xff0c;广泛用于DIY机械键盘的制作。本文将详细介绍最新架构下所需创建的文件及其功能。 准备工作 在…...

获取conan离线安装包

1、获取conan离线安装包 # apt-get install python3.12-venv pip #缓存的安装存放在/var/cache/apt/archives目录 # mkdir /myenv && cd /myenv #创建虚拟环境目录 # python3 -m venv myenv #创建虚拟环境 # source myenv/bin/activate #激活虚拟环境&#xff…...

【Java ee初阶】网络原理

应用层 由于下面的四层都是系统已经实现好了的&#xff0c;但是应用层是程序员自己写的&#xff0c;因此应用层是程序员最重要的一层。 应用层中&#xff0c;程序员通常需要定义好数据传输格式&#xff0c;调用传输层api&#xff08;socket api&#xff09;进行真正的网络通信…...

Makefile中 链接库,同一个库的静态库与动态库都链接了,生效的是哪个库

Makefile中 链接库&#xff0c;同一个库的静态库与动态库都链接了&#xff0c;生效的是哪个库 在 Makefile 中同时链接同一个库的静态库&#xff08;.a&#xff09;和动态库&#xff08;.so&#xff09;时&#xff0c;具体哪个库生效取决于链接顺序和编译器行为。以下是详细分析…...

【AI提示词】金字塔模型应用专家

提示说明 专业运用金字塔原理优化信息结构与逻辑表达&#xff0c;实现高效精准的思维传达。 提示词 # Role: 金字塔模型应用专家 ## Profile - **language**: 中文/英文 - **description**: 专业运用金字塔原理优化信息结构与逻辑表达&#xff0c;实现高效精准的思维传…...

电子电器架构 --- 车载以太网拓扑

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 钝感力的“钝”,不是木讷、迟钝,而是直面困境的韧劲和耐力,是面对外界噪音的通透淡然。 生活中有两种人,一种人格外在意别人的眼光;另一种人无论…...

使用FastAPI微服务在AWS EKS上实现AI会话历史的管理

架构概述 本文介绍如何使用FastAPI构建微服务架构&#xff0c;在AWS EKS上部署两个微服务&#xff1a; 服务A&#xff1a;接收用户提示服务B&#xff1a;处理对话逻辑&#xff0c;与Redis缓存和MongoDB数据库交互 该架构利用AWS ElastiCache(Redis)实现快速响应&#xff0c;…...

Flutter PIP 插件 ---- 为iOS 重构PipController, Demo界面,更好的体验

接上文 Flutter PIP 插件 ---- 新增PipActivity&#xff0c;Android 11以下支持自动进入PIP Mode 项目地址 PIP&#xff0c; pub.dev也已经同步发布 pip 0.0.3&#xff0c;你的加星和点赞&#xff0c;将是我继续改进最大的动力 在之前的界面设计中&#xff0c;还原动画等体验一…...

vue开发用户注册功能

文章目录 一、开发步骤二、效果图三、搭建页面创建views/Login.vue在App.vue中导入Login.vue 四、数据绑定五、表单校验六、访问后端 API 接口&#xff0c;完成注册七、完整的Login.vue代码八、参考资料 一、开发步骤 二、效果图 三、搭建页面 创建views/Login.vue 完整内容在…...

Qt中的RCC

Qt资源系统(Qt resource system)是一种独立于平台的机制&#xff0c;用于在应用程序中传输资源文件。如果你的应用程序始终需要一组特定的文件(例如图标、翻译文件和图片)&#xff0c;并且你不想使用特定于系统的方式来打包和定位这些资源&#xff0c;则可以使用Qt资源系统。 最…...

muduo源码解析

1.对类进行禁止拷贝 class noncopyable {public:noncopyable(const noncopyable&) delete;void operator(const noncopyable&) delete;protected:noncopyable() default;~noncopyable() default; }; 2.日志 使用枚举定义日志等级 enum LogLevel{TRACE,DEBUG,IN…...

Qt QCheckBox 使用

1.开发背景 Qt QCheckBox 是勾选组件&#xff0c;具体使用方法可以参考 Qt 官方文档&#xff0c;这里只是记录使用过程中常用的方法示例和遇到的一些问题。 2.开发需求 QCheckBox 使用和踩坑 3.开发环境 Window10 Qt5.12.2 QtCreator4.8.2 4.功能简介 4.1 简单接口 QChec…...

【工具记录分享】提取bilibili视频字幕

F12大法 教程很多 但方法比较统一 例快速提取视频字幕&#xff01;适用B站、AI字幕等等。好用 - 哔哩哔哩 无脑小工具 哔哩哔哩B站字幕下载_在线字幕解析-飞鱼视频下载助手 把链接扔进去就会自动生成srt文件 需要txt可以配合&#xff1a; SRT转为TXT...

设计模式【cpp实现版本】

文章目录 设计模式1.单例模式代码设计1.饿汉式单例模式2.懒汉式单例模式 2.简单工厂和工厂方法1.简单工厂2.工厂方法 3.抽象工厂模式4.代理模式5.装饰器模式6.适配器模式7.观察者模式 设计模式 1.单例模式代码设计 ​ 为什么需要单例模式&#xff0c;在我们的项目设计中&…...