Vue3从入门到实战:路由的query和params参数

在Vue 3中,我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息,以便页面可以根据这些信息来显示不同的内容或执行不同的操作。

 查询参数的使用方式类似于在URL中添加附加信息,以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用,例如搜索功能、过滤功能、分页功能等等。

举个例子,假设我们有一个商品列表页面,用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时,我们可以将输入的关键字作为查询参数添加到URL中,然后跳转到商品列表页面。在商品列表页面,我们可以通过读取查询参数的值来获取用户输入的关键字,并根据关键字来展示匹配的商品。

比如我在News组件中的detail使用了<RouterLink>组件来创建一个链接,指向径/news/detail 并且附带了查询参数a=哇哈哈,b=华为,c=小米{、显示了新闻的标题。当用户点击这个链接时,URL将会变成/news/detail?a=1,b=2,c=3。注意,查询参数使用问号(?)来分隔路径和查询字符串。

未加参数前:

加参数后: 

当我点击新闻里的标题时,就会看到路径中附带的参数

但这并不是动态参数的绑定,即无论你点击哪个新闻标题,都是出现同一样的URL。

所以现在要讲到动态参数的绑定,即我点击不同的新闻标题时,可以对应出现不同的参数,

1.路由-query参数 

路由的查询参数是一种在URL中传递数据的机制。它们可以用于在不同的路由之间传递参数,以便组件可以根据这些参数进行不同的行为或显示不同的内容。

1.1 query参数的第一种写法

1.News组件传递query参数。
注意:

  • 在to前面加上":"
  • 在to的" "内加入反引号`(数字1的左边)
  • 用$ 连接对象

2.query传参后在detail组件中修改内容 

 

解析:

以上使用了route.query来访问查询参数。通过route.query.idroute.query.titleroute.query.content,可以获取URL中的idtitlecontent查询参数的值,并将它们显示在列表项中。

<script setup>部分,使用useRoute()函数从Vue Router中导入了route对象,并将它设置为响应式变量。这样就可以在模板中使用route.query来访问查询参数的值。
3.展示

 

 

 

 

News组件代码:

<template><div class="news"><!-- 导航区 --><ul><li v-for="news in newsList" :key="news.id"><RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">import {reactive} from 'vue'//import {RouterView,RouterLink} from 'vue-router'const newsList = reactive([{id:'title01',title:'很好的抗癌食物',content:'西篮花'},{id:'title02',title:'如何一夜暴富',content:'学IT'},{id:'title03',title:'震惊,万万没想到',content:'明天是周一'},{id:'title04',title:'好消息!好消息!',content:'快过年了'}])</script><style scoped>
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
</style>

Detail组件代码: 

<template><ul class="news-list"><li>编号:{{ route.query.id }}</li><li>标题:{{ route.query.title  }}</li><li>内容:{{ route.query.content  }}</li></ul></template><script setup lang="ts" name="About">import { useRoute } from 'vue-router';let route =  useRoute();</script><style scoped>.news-list {list-style: none;padding-left: 20px;}.news-list>li {line-height: 30px;}</style>

 


1.2 query参数的第二种写法

跳转并携带query参数(to的对象写法) 

 

代码:

<template><div class="news"><!-- 导航区 --><ul><li v-for="news in newsList" :key="news.id"><!-- //第一种写法<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> --><!-- 第二种写法 --><RouterLink :to="{//name:'xiang', //用name也可以跳转path:'/news/detail',query:{id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">import {reactive} from 'vue'//import {RouterView,RouterLink} from 'vue-router'const newsList = reactive([{id:'title01',title:'很好的抗癌食物',content:'西篮花'},{id:'title02',title:'如何一夜暴富',content:'学IT'},{id:'title03',title:'震惊,万万没想到',content:'明天是周一'},{id:'title04',title:'好消息!好消息!',content:'快过年了'}])</script><style scoped>
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
</style>

补充:

 

有时候,你会觉得比较冗余,是否能简化一下,可以的。

 整体代码:

<template><ul class="news-list"><li>编号:{{ query.id }}</li><li>标题:{{ query.title }}</li><li>内容:{{ query.content }}</li></ul>
</template><script setup lang="ts" name="About">import {toRefs} from 'vue'import {useRoute} from 'vue-router'let route = useRoute()let {query} = toRefs(route)</script><style scoped>.news-list {list-style: none;padding-left: 20px;}.news-list>li {line-height: 30px;}
</style>

 


2.路由-params参数

2.1 params参数的第一种写法 

1.还原Detail组件

2.还原News组件

 3.在index.ts文件中子路的规则下占位

 

4.返回News组件中传入参数

 5.我们可以通过console.log(route)观察params的参数(这步骤可无)

 6.修改Detail组件的展示区(开始变成响应式)

 

7.修改News组件的内容(也是变成响应式)

 展示:(这是标题1的,后面点击其他标题展示区会对应出现内容,就不一一展开了)

 


 

2.2. params参数的第二种写法

跟query的第二种写法类似,但有一点要区分!!!

 

注意这里是用name配置项的 ,而不是用path配置项。

那如果我偏用path来配置呢,那就喜提报错!



 

Detail组件代码:

<template><ul class="news-list"><li>编号:{{ route.params.id }}</li><li>标题:{{ route.params.title }}</li><li>内容:{{ route.params.content }}</li></ul></template><script setup lang="ts" name="About">import {useRoute} from 'vue-router'const route = useRoute()console.log(route)</script><style scoped>.news-list {list-style: none;padding-left: 20px;}.news-list>li {line-height: 30px;}</style>

News组件代码 

<template><div class="news"><!-- 导航区 --><ul><li v-for="news in newsList" :key="news.id"><!-- //第一种写法<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink> --><!-- 第二种写法 --><RouterLink :to="{name:'xiangqing',params:{id:news.id,title:news.title,content:news.content}}">{{news.title}}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">import {reactive} from 'vue'//import {RouterView,RouterLink} from 'vue-router'const newsList = reactive([{id:'title01',title:'很好的抗癌食物',content:'西篮花'},{id:'title02',title:'如何一夜暴富',content:'学IT'},{id:'title03',title:'震惊,万万没想到',content:'明天是周一'},{id:'title04',title:'好消息!好消息!',content:'快过年了'}])</script><style scoped>
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
</style>

 


补充:

参数可传可不传的情况,比如:

 

 

再次提醒:

1.传递params参数时,若使用to的对象写法,必须使用name配置项,不能用path

2.传递params参数时,需要提前在规则中占位。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1323594.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

路由Vue-Router使用

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成&#xff0c;让用 Vue.js 构建单页应用变得轻而易举。 介绍 | Vue Router (vuejs.org) 1. 安装 npm install vue-router4 查看安装好的vue-router 2. 添加路由 新建views文件夹用来存放所有的页面&#xff0c;在…

【深度学习】sdwebui的token_counter,update_token_counter,如何超出77个token的限制?对提示词加权的底层实现

文章目录 前言关于token_counter关于class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing)如何超出77个token的限制&#xff1f;对提示词加权的底层实现Overcoming the 77 token limit in diffusers方法1 手动拼方法2 compel 问询、帮助请看&#xff1a; 前言 …

redis之主从复制、哨兵模式

一 redis群集有三种模式 主从复制&#xff1a; 主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。 主从复制主要实现了数据的多机备份&#xff0c;以及对于读操作的负载均衡和简单的故障恢复。 缺陷&#xff1a; 故障恢复无法自动化&…

Python搭建编程环境—安装Python3解释器

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;零基础学Python &#x1f4ac;个人格言&#xff1a;不断的翻越一…

“多组数组”题的注意事项,天杀的“鲁棒性”

【题目描述】 输入一些整数&#xff0c;求出它们的最小值、最大值和平均值&#xff08;保留3位小数&#xff09;。输入保证这些数都是不超过1000的整数。 输入包含多组数据&#xff0c;每组数据第一行是整数个数n&#xff0c;第二行是n个整数。n&#xff1d;0为输入结束标记&…

[C++初阶]初识C++(一)—————命名空间和缺省函数

声明: 本篇文献内容选自百度文库、比特就业课 代码内容部分选自比特就业课 一、命名空间 1.什么是命名空间 在编程语言中&#xff0c;命名空间是一种特殊的作用域&#xff0c;它包含了处于该作用域中的所有标示符&#xff0c;而且其本身也是由标示符表示的。命名空间的使用目…

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…

权限提升-Linux系统权限提升篇VulnhubRbash绕过DockerLXD容器History泄漏shell交互

知识点 1、普通用户到Linux-泄漏-History 2、普通用户到Linux-限制-Rbash绕过 3、普通用户到Linux-容器-LXD&Docker 4.Linux系统提权-web/普通用户-docker逃逸&提权&shell交互 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及…

STM32 移植 LVGL -- 教程图解

&#xff08; 编辑状态中&#xff0c;已完成80%&#xff0c;估计清明假期后完成更新 ) 移植效果&#xff0c;先睹为快&#xff1a; 目录 一、LVGL 简述 二、准备一个STM32的工程 三、LVGL 官方下载 四、裁剪 源文件 五、添加 源文件 六、注册 显示 七、注册 触摸输入 八…

语言模型进化史(上)

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解语言模型从朴素语言模型到基于神经网络的语言模型&#xff0c;下篇主要讲解现代大语言模型以及基于指令微调的LLM。文章来源是&#xff1a;https://www.numind.ai/blog/what-are-large-language-models 一、语…

【C++入门】初识C++

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

单片机家电产品--过零检测

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 单片机家电产品–过零检测 前言 记录学习单片机家电产品内容 已转载记录为主 一、知识点 1 什么是过零检测 1 过零检测指的是在交流系统中&#xff0c;在一个交流周期中…

第12章 集合框架

一 集合框架概述 1.1 生活中的容器 1.2 数组的特点与弊端 一方面&#xff0c;面向对象语言对事物的体现都是以对象的形式&#xff0c;为了方便对多个对象的操作&#xff0c;就要对对象进行存储。另一方面&#xff0c;使用数组存储对象方面具有一些弊端&#xff0c;而Java 集合…

搜索--找出克隆二叉树中的相同节点

题目描述 给你两棵二叉树&#xff0c;原始树 original 和克隆树 cloned&#xff0c;以及一个位于原始树 original 中的目标节点 target。 其中&#xff0c;克隆树 cloned 是原始树 original 的一个 副本 。 请找出在树 cloned 中&#xff0c;与 target 相同 的节点&#xff…

蓝桥杯备考

目录 P8823 [传智杯 #3 初赛] 期末考试成绩 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 P8828 [传智杯 #3 练习赛] 直角三角形 题目描述 输入格式 输出格式 输入输出样例 代码 P8833 [传智杯 #3 决赛] 课程 题目背景 题目描述 输入格式 输出格式…

vivado eFUSE 寄存器访问和编程

eFUSE 寄存器访问和编程 注释 &#xff1a; 在 MPSoC 和 Versal 器件上不支持以下 eFUSE 访问和编程方法。 7 系列、 UltraScale 和 UltraScale 器件具有一次性可编程位用于执行特定功能 &#xff0c; 称为 eFUSE 位。不同 eFUSE 位类型如 下所述&#xff1a; • …

突破校园网限速:使用 iKuai 多拨分流负载均衡 + Clash 代理(内网带宽限制通用)

文章目录 1. 简介2. iKuai 部署2.1 安装 VMware2.2 安装 iKuai(1) 下载固件(2) 安装 iKuai 虚拟机(3) 配置 iKuai 虚拟机(4) 配置 iKuai(5) 配置多拨分流 2.3 测试速度 3. Clash 部署3.1 准备工作(1) 配置磁盘分区(2) 安装 Docker(3) 安装 Clash(4) 设置代理 1. 简介 由于博主…

新质生产力丨zData X 数据库一体机助力财政一体化平台全面升级

在数字化转型的大潮中&#xff0c;某财政局积极响应国家财政管理现代化的战略部署&#xff0c;启动了财政一体化平台升级改造工程。该项目旨在将财政局内部各部门及其各自独立的业务系统进行全面整合&#xff0c;构建起一个集约化的财政管理平台&#xff0c;力求通过技术创新推…

字符分类函数

字符分类函数 C语言中有⼀系列的函数是专门做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。这些函数的使用都需要包含⼀个头文件是 ctype.h 这些函数的使用方法非常类似&#xff0c;我们就讲解⼀个函数的事情&#xff0c;其他的非常类似&#xff1a; int i…

合同约定的绩效奖金说不给就不给了, 这合法吗?

目录 一、北京海淀法院参考案例 二、关于绩效奖金的性质&#xff1f; 三、绩效奖金应否发放取决于哪些因素&#xff1f; 四、员工如何举证与质证 五、提前离职的员工 是否享受当年度绩效奖金&#xff1f; 一、北京海淀法院参考案例 https://mp.weixin.qq.com/s/sq0mFCC8M…