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

Vue-57、Vue技术路由的参数如何传递

query参数传递

1、传递参数

<!--                跳转路由并携带query参数,to的字符串写法-->
<router-link :to="`/home/message/detail?id=${p.id}&title=${p.title}`">
{{p.title}}
</router-link><!--                跳转路由并携带query参数,to的对象写法--><router-link :to="{path:'/home/message/detail',query:{id:p.id,title:p.title}}">{{p.title}}
</router-link>

2、接收参数

<li>消息标题:{{$route.query.id}}</li>
<li>消息标号:{{$route.query.title}}</li>

params参数传递

1、配置路由,声明接收params参数

routes:[{name:'guanyu',path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',//使用占位符声明接收params参数component:Detail}]}]},]

2、传递参数

<!--                跳转路由并携带params参数,to的字符串写法-->
<router-link :to="`/home/message/detail/${p.id}/${p.title}`">{{p.title}}</router-link>
<!--                跳转路由并携带params参数,to的对象写法--><router-link :to="{name:'xiangqing',params:{id:p.id,title:p.title}}">{{p.title}}</router-link>
	特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!!!

3、接收参数:

<li>消息标题:{{$route.params.id}}</li>
<li>消息标号:{{$route.params.title}}</li>

相关文章:

Vue-57、Vue技术路由的参数如何传递

query参数传递 1、传递参数 <!-- 跳转路由并携带query参数&#xff0c;to的字符串写法--> <router-link :to"/home/message/detail?id${p.id}&title${p.title}"> {{p.title}} </router-link><!-- 跳转路由…...

《MySQL 简易速速上手小册》第1章:MySQL 基础和安装(2024 最新版)

文章目录 1.1 MySQL 概览&#xff1a;版本、特性和生态系统1.1.1 基础知识1.1.2 重点案例&#xff1a;使用 Python 实现 MySQL 数据的 CRUD 操作1.1.3 拓展案例 1&#xff1a;使用 Python 实现 MySQL 数据备份**1.1.4 拓展案例 2&#xff1a;使用 Python 分析 MySQL 数据 1.2 安…...

Linux 软件管理(YUM RPM)

1 YUM yum&#xff08;全称为 Yellow dog Updater, Modified&#xff09;是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。基于RPM包管理&#xff0c;能够从指定的服务器自动处理依赖性关系&#xff0c;并且一次安装所有依赖的软件包&#xff0c;无须繁琐地一次次…...

【Makefile语法 05】动静态库编译链接

目录 一、多文件项目源代码 二、静态库编译链接 三、动态库编译链接 一、多文件项目源代码 // include/add.hpp#pragma once int add(int a, int b); // include/sub.hpp#pragma once int sub(int a, int b); // src/add.cpp#include "add.hpp"int add(int a, …...

JS - 处理元素滚动

业务功能中时常有元素滚动的功能&#xff0c;现在就总结一下一些常用的事件。 一、定位滚动元素 做一切滚动操作之前都应该先定位到滚动元素&#xff0c;再做其他操作&#xff0c;如滚动顶部&#xff0c;获取滚动距离、禁止滚动等。 把以下代码复制粘贴到浏览器 Console 面板…...

JavaScript滚动事件

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 滚动是网页交互不可或缺的一部分。监听页面和元素的滚动事件,可以帮助…...

4.0 Zookeeper Java 客户端搭建

本教程使用的 IDE 为 IntelliJ IDEA&#xff0c;创建一个 maven 工程&#xff0c;命名为 zookeeper-demo&#xff0c;并且引入如下依赖&#xff0c;可以自行在maven中央仓库选择合适的版本&#xff0c;介绍原生 API 和 Curator 两种方式。 IntelliJ IDEA 相关介绍&#xff1a;…...

C#既然数组长度不可改变,那么如何动态调整集合类型数组大小,以便添加或删除元素?

目录 1.使用动态数组&#xff08;ArrayList&#xff09;&#xff1a; 2.使用 jagged array&#xff08;不规则数组&#xff09;&#xff1a; 3.使用 List &#xff1a; 4.使用数组复制&#xff1a; 在C#中&#xff0c;数组的长度是固定的&#xff0c;一旦声明和初始化&…...

3.1 Verilog 连续赋值

关键词&#xff1a;assign&#xff0c; 全加器 连续赋值语句是 Verilog 数据流建模的基本语句&#xff0c;用于对 wire 型变量进行赋值。&#xff1a; 格式如下 assign LHS_target RHS_expression &#xff1b; LHS&#xff08;left hand side&#xff09; 指赋值操作…...

【http】2、http request header Origin 属性、跨域 CORS、同源、nginx 反向代理、预检请求

文章目录 一、Origin 含义二、跨源资源共享&#xff1a;**Cross-Origin Resource Sharing** CORS2.1 跨域的定义2.2 功能概述2.3 场景示例2.3.1 简单请求2.3.2 Preflighted requests&#xff1a;预检请求 2.4 header2.4.1 http request header2.4.1.1 Origin2.4.1.2 Access-Con…...

LangChain pdf的读取以及向量数据库的使用

以下使用了3399.pdf&#xff0c; Rockchip RK3399 TRM Part1 import ChatGLM from langchain.chains import LLMChain from langchain_core.output_parsers import StrOutputParser from langchain_core.prompts import ChatPromptTemplate from langchain.chains import Simp…...

VUE学习——事件修饰符

阻止默认事件 <template><a click"onClickHandle" href"https://www.baidu.com">baidu</a><a click.prevent"onClickHandle" href"https://www.baidu.com">baidu</a> </template> <script>…...

开放平台技术架构设计与实现的实战总结

开放平台是企业向外部开发者提供API接口和服务的平台&#xff0c;促进生态系统的建设和业务拓展。本文将介绍开放平台技术架构的设计原则和实现方法&#xff0c;帮助读者了解如何构建一个稳健、安全且易于扩展的开放平台。 1. 什么是开放平台&#xff1f; - 解释了开放平台…...

飞桨自然语言处理框架 paddlenlp的 trainer

飞桨&#xff08;PaddlePaddle&#xff09;的NLP库PaddleNLP中的Trainer类是一个用于训练和评估模型的简单但功能完整的循环。它被优化用于与PaddleNLP一起使用。Trainer类简化了训练过程&#xff0c;提供了自动的批处理、模型保存、日志记录等特性。 以下是Trainer类的主要参数…...

SQL世界之命令语句Ⅲ

目录 一、SQL JOIN 1.JOIN 和 Key 2.使用 JOIN 3.不同的 SQL JOIN 二、SQL INNER JOIN 关键字 1.SQL INNER JOIN 关键字 2.INNER JOIN 关键字语法 3.内连接&#xff08;INNER JOIN&#xff09;实例 三、SQL LEFT JOIN 关键字 1.SQL LEFT JOIN 关键字 2.LEFT JOIN 关…...

Snoop Version 2 Packet Capture File Format

RFC1761 - Snoop Version 2 Packet Capture File Format, FEBRUARY 1995 本备忘录的状态 本备忘录为互联网社区提供帮助信息。 本备忘录不作为任何类型的互联网标准。 本备忘录的分发不受限制。 Status of this Memo This memo provides information for the Internet communit…...

扩展说明: 指令微调 Llama 2

这篇博客是一篇来自 Meta AI&#xff0c;关于指令微调 Llama 2 的扩展说明。旨在聚焦构建指令数据集&#xff0c;有了它&#xff0c;我们则可以使用自己的指令来微调 Llama 2 基础模型。 目标是构建一个能够基于输入内容来生成指令的模型。这么做背后的逻辑是&#xff0c;模型如…...

VUE 全局设置防重复点击

请求后端防止重复点击&#xff0c;用户点击加入遮罩层&#xff0c;请求完毕关闭遮罩层 我们利用请求拦截器&#xff0c;在用户点击的时候&#xff0c;弹出遮罩层 本文采用i18n国际化 element plus UI&#xff0c;提取你想要的&#xff0c;这里不做简化 完整代码如下&#xf…...

备战蓝桥杯---动态规划(基础1)

先看几道比较简单的题&#xff1a; 直接f[i][j]f[i-1][j]f[i][j-1]即可&#xff08;注意有马的地方赋值为0&#xff09; 下面是递推循环方式实现的AC代码&#xff1a; #include<bits/stdc.h> using namespace std; #define int long long int a[30][30]; int n,m,x,y; …...

CVE-2018-19518 漏洞复现

CVE-2018-19518 漏洞介绍 IMAP协议&#xff08;因特网消息访问协议&#xff09;它的主要作用是邮件客户端可以通过这种协议从邮件服务器上获取邮件的信息&#xff0c;下载邮件等。它运行在TCP/IP协议之上&#xff0c;使用的端口是143。在php中调用的是imap_open函数。 PHP 的…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...