第二十:【路由的props配置】
作用:让路由组件更方便的收到参数(可以将路由参数作为props传给组件)
{name:'xiang',path:'detail/:id/:title/:content',component:Detail,
第一种方法:// props的对象写法,作用:把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3},
// props的布尔值写法,作用:把收到了每一组params参数,作为props传给Detail组件// props:true第二种方法:// props的函数写法,作用:把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}
路由规则的props 的写法:
第一种写法:在路由上:props:true 只支持 params 的形式
{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail/:id/:title/:content?',component:Detail,// 第一种写法: // 第一种写法:将路由收到的所有params参数作为props传给路由组件props:true, }]},第二步:在Detail.vue 页面中:<template><ul class="news-list"><li>编号:{{ id }}</li><li>标题:{{ title }}</li><li>内容:{{ content }}</li></ul></template><script setup lang="ts" name="About">defineProps(['id','title','content']) // 执行这个defineProps 中包括的参数</script>
第二种方法:支持query 模式:
// 第二种写法:函数写法,可以自己决定将什么作为props给路由组件
props(route){ // 引入 route 路由
return route.query
}
注意如果是 query 和 params 时的区别:
路由:query 模式下path 是这样的 path:'detail',
params 模式是这样写: path:'detail/:id/:title/:content?',
{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail,// 第一种方法://props:true, // params模式下 path 要这样写:path:'detail/:id/:title/:content?',// 第二种方法:// 第二种写法:函数写法,可以自己决定将什么作为props给路由组件props(route){ // query模式下 path 要这样写 path:'detail',return route.query}}]},
相关文章:
第二十:【路由的props配置】
作用:让路由组件更方便的收到参数(可以将路由参数作为props传给组件) {name:xiang,path:detail/:id/:title/:content,component:Detail, 第一种方法:// props的对象写法,作用:把对象中的每一组key-valu…...
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
引言 在移动端H5开发中,全屏滚动效果因其沉浸式体验而广受欢迎。如何快速实现带有动态加载动画的全屏滚动页面?本文将手把手教你使用 Vue 2、全屏滚动插件 fullpage-vue 和动画库 animate.css 3.5.1,打造一个高效且视觉冲击力强的H5页面。通…...
AF3 DataPipeline类process_pdb 方法解读
DataPipeline 类中的 process_pdb 方法用于从 PDB 文件中生成特定蛋白质链的特征,作为 AlphaFold3 预测的输入。它的流程与 process_mmcif 类似,但输入来源是 PDB 文件而非 MmcifObject。 源代码: def process_pdb(self,pdb_path: str,alignment_dir: str,is_distillation:…...
抓包工具 wireshark
1.什么是抓包工具 抓包工具是什么?-CSDN博客 2.wireshark的安装 【抓包工具】win 10 / win 11:WireShark 下载、安装、使用_windows抓包工具-CSDN博客 3.wireshark的基础操作 Wireshark零基础使用教程(超详细) - 元宇宙-Meta…...
OpenBMC:BmcWeb app获取socket
OpenBMC:BmcWeb app.run-CSDN博客 app对象在run函数中调用了setupSocket() static std::vector<Acceptor> setupSocket() {std::vector<Acceptor> acceptors;char** names = nullptr;int listenFdCount = sd_listen_fds_with_names(0, &names);BMCWEB_LOG_DE…...
《深度学习实战》第2集-补充:卷积神经网络(CNN)与图像分类 实战代码解析和改进
以下是对《深度学习实战》第2集中 CIFAR-10 数据集 使用卷积神经网络进行图像分类实战 代码的详细分析,并增加数据探索环节,同时对数据探索、模型训练和评估的过程进行具体说明。所有代码都附上了运行结果配图,方便对比。 《深度学习实战》第…...
nodejs:express + js-mdict 作为后端,vue 3 + vite 作为前端,在线查询英汉词典
向 doubao.com/chat/ 提问: node.js js-mdict 作为后端,vue 3 vite 作为前端,编写在线查询英汉词典 后端部分(express js-mdict ) 1. 项目结构 首先,创建一个项目目录,结构如下࿱…...
《深度剖析Linux 系统 Shell 核心用法与原理_666》
1. 管道符的用法 查找当前目录下所有txt文件并统计行数 # 使用管道符将ls命令的结果传递给wc命令进行行数统计 ls *.txt | wc -l 在/etc目录下查找包含"network"的文件并统计数量 # 使用find命令查找文件,并通过grep查找包含特定字符串的文件…...
索提诺比率(Sortino Ratio):更精准的风险调整收益指标(中英双语)
索提诺比率(Sortino Ratio):更精准的风险调整收益指标 📉📊 📌 什么是索提诺比率? 在投资分析中,我们通常使用 夏普比率(Sharpe Ratio) 来衡量风险调整后的…...
minio作为K8S后端存储
docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…...
一周学会Flask3 Python Web开发-Jinja2模板访问对象
锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 如果渲染模板传的是对象,如果如何来访问呢? 我们看下下面示例: 定义一个Student类 cla…...
RAGS评测后的数据 如何利用influxdb和grafan 进行数据汇总查看
RAGS(通常指相关性、准确性、语法、流畅性)评测后的数据能借助 InfluxDB 存储,再利用 Grafana 进行可视化展示,实现从四个维度查看数据,并详细呈现每个问题对应的这四个指标情况。以下是详细步骤: 1. 环境准备 InfluxDB 安装与配置 依据自身操作系统,从 InfluxDB 官网下…...
第25周JavaSpringboot实战-电商项目 4.商品分类管理
商品分类模块开发笔记 模块功能概述 实现分类数据的 增删改查 功能核心难点: 分类的父子级目录结构递归实现多级分类查找列表展示顺序控制(从父级向子级递归) 接口说明 后台接口 1. 添加分类 请求地址: /admin/category/add 请求方法: …...
C语言--正序、逆序输出为奇数的位。
题目: 采用正序和逆序分别输出为奇数的位。例如输入12345,正序输出135,逆序输出531 代码: #include <stdio.h>void printOddDigits(int num) {int res 0;int divider 10;while (num / divider > 10) {divider * 10;…...
C#快速调用DeepSeek接口,winform接入DeepSeek查询资料 C#零门槛接入DeepSeek C#接入DeepSeek源代码下载
下载地址<------完整源码 在数字化转型加速的背景下,企业应用系统对智能服务的需求日益增长。DeepSeek作为先进的人工智能服务平台,其自然语言处理、图像识别等核心能力可显著提升业务系统的智能化水平。传统开发模式下,C#开发者需要耗费大…...
H13-821 V3.0 HCIP 华为云服务架构题库
华为云上哪个服务能够用于收集来自主机和云服务的日志数据,并通过海量日志数据的分析与处理帮助开发或运维人员进行问题定位和分析? A:云监控服务 B:云日志服务 C:云审计服务 D:对象存储服务 答案ÿ…...
Linux主机用户登陆安全配置
Linux主机用户登陆安全配置 在Linux主机上进行用户登录安全配置是一个重要的安全措施,可以防止未经授权的访问。以下是如何创建用户hbu、赋予其sudo权限,以及禁止root用户SSH登录,以及通过ssh key管理主机用户登陆。 创建用户hbu 使用具有…...
提升数据洞察力:五款报表软件助力企业智能决策
概述 随着数据量的激增和企业对决策支持需求的提升,报表软件已经成为现代企业管理中不可或缺的工具。这些软件能够帮助企业高效处理数据、生成报告,并将数据可视化,从而推动更智能的决策过程。 1. 山海鲸报表 概述: 山海鲸报表…...
Linux | man 手册使用详解
注:本文为 “Linux man 手册” 相关文章合辑。 略作重排。 man 手册常用命令 1. 查看和搜索手册页 查看特定软件包的手册页,并使用 grep 命令过滤出包含特定关键字的行: man <package> | grep <keyword>在整个系统的手册页中…...
安全见闻4
今天学了Windows操作系统和驱动程序的相关知识 Windows注册表 注册表是windows系统中具有层次结构的核心数据库 储存的数据对windows 和Windows上运行的应用程序和服务至关重要。注册表时帮助windows控制硬件、软件、用户环境和windows界面的一套数据文件。 打开注册表编辑器…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。
2024 年,高端封装市场规模为 80 亿美元,预计到 2030 年将超过 280 亿美元,2024-2030 年复合年增长率为 23%。 细分到各个终端市场,最大的高端性能封装市场是“电信和基础设施”,2024 年该市场创造了超过 67% 的收入。…...
工厂方法模式和抽象工厂方法模式的battle
1.案例直接上手 在这个案例里面,我们会实现这个普通的工厂方法,并且对比这个普通工厂方法和我们直接创建对象的差别在哪里,为什么需要一个工厂: 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类: 两个发…...
运动控制--BLDC电机
一、电机的分类 按照供电电源 1.直流电机 1.1 有刷直流电机(BDC) 通过电刷与换向器实现电流方向切换,典型应用于电动工具、玩具等 1.2 无刷直流电机(BLDC) 电子换向替代机械电刷,具有高可靠性,常用于无人机、高端家电…...
Spring Boot SQL数据库功能详解
Spring Boot自动配置与数据源管理 数据源自动配置机制 当在Spring Boot项目中添加数据库驱动依赖(如org.postgresql:postgresql)后,应用启动时自动配置系统会尝试创建DataSource实现。开发者只需提供基础连接信息: 数据库URL格…...
