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

news2024/11/22 20:58:08

在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.id、route.query.title和route.query.content，可以获取URL中的id、title和content查询参数的值，并将它们显示在列表项中。

在<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.coloradmin.cn/o/1566460.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI技术创业：把握机遇，提升能力，迎接未来挑战

AI技术创业：把握机遇，提升能力，迎接未来挑战

文章目录 人工智能三次浪潮人工智能时代机遇提升核心能力AI时代的长期赛道和早期优势实践应用&#xff1a;让AI工具为你所用学会变通&#xff1a;适应AI领域的快速变化提升核心能力&#xff1a;想象力、创造力和提问能力结语 人工智能三次浪潮 第一次黄金期&#xff1a;1956年…
阅读更多...
基于SSM的网络视频播放器

基于SSM的网络视频播放器

目录 背景 技术简介 系统简介 界面预览 背景 互联网的迅猛发展彻底转变了全球各类组织的管理策略。自20世纪90年代起&#xff0c;中国政府和企业便开始探索利用网络系统进行信息管理。然而&#xff0c;早期的网络覆盖不广泛、用户接受度不高、相关法律法规不完善以及技术开…
阅读更多...
WPF文本框TextEdit不以科学计数法显示

WPF文本框TextEdit不以科学计数法显示

WPF文本框TextEdit不以科学计数法显示 一个float或者double类型的数值&#xff0c;如果小数点后0的个数≥4&#xff0c;在界面上就会自动以科学计数法显示&#xff0c; 比如&#xff1a;0.00003会显示成这样 但是很多时候我并不希望它这样显示&#xff0c;因为这样不方便编辑…
阅读更多...
成都欣丰洪泰文化传媒有限公司引领电商新风向

成都欣丰洪泰文化传媒有限公司引领电商新风向

在当今数字化时代&#xff0c;电子商务行业日新月异&#xff0c;竞争激烈。然而&#xff0c;在这股浪潮中&#xff0c;成都欣丰洪泰文化传媒有限公司凭借其独特的战略眼光和创新精神&#xff0c;正引领着电商领域的新浪潮。本文将探讨成都欣丰洪泰文化传媒有限公司如何在激烈的…
阅读更多...
实战webSocket压测（二）jmeter配置webSocket连接

实战webSocket压测（二）jmeter配置webSocket连接

背景 我们可以通过Jmeter添加插件实现webSocket脚本编写。WebSocket的插件较多&#xff0c;我选择以WebSocket Samplers by Peter Doornbosch为例来进行配置。 步骤1、WebSocket Samplers插件安装 下载地址&#xff1a;JMeter WebSocket Samplers&#xff0c;建议下载最新版本…
阅读更多...
阿里巴巴25届实习生内推

阿里巴巴25届实习生内推

#阿里巴巴 #春招实习 阿里国际春季2025届实习生招聘4月1日已正式启动&#xff01;学生网申投递、师兄师姐内推通道均已开放 整体介绍&#xff08;含在招岗位&#xff09; 内推投递方式 方式一&#xff1a;内推码自行投递 方式二&#xff1a;通过简历投递 简历发邮箱&#xf…
阅读更多...
Lumos学习王佩丰Excel第一讲：认识Excel

Lumos学习王佩丰Excel第一讲：认识Excel

最近发现自己在操作excel的一些特殊功能时会有些不顺手&#xff0c;所以索性找了一个比较全的教程&#xff08;王佩丰excel24讲&#xff09;拿来学习&#xff0c;刚好形成文档笔记&#xff0c;分享给有需要但没有时间看视频的朋友们。整体笔记以王老师授课的知识点去记录&#…
阅读更多...
蓝桥杯备考

蓝桥杯备考

目录 P8823 [传智杯 #3 初赛] 期末考试成绩 题目描述 输入格式 输出格式 输入输出样例 说明/提示 代码 P8828 [传智杯 #3 练习赛] 直角三角形 题目描述 输入格式 输出格式 输入输出样例 代码 P8833 [传智杯 #3 决赛] 课程 题目背景 题目描述 输入格式 输出格式…
阅读更多...
【热门话题】文言一心与ChatGPT-4：一场跨时代智能对话系统的深度比较

【热门话题】文言一心与ChatGPT-4：一场跨时代智能对话系统的深度比较

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 文言一心与ChatGPT-4&#xff1a;一场跨时代智能对话系统的深度比较一、技术背景…
阅读更多...
西电计科大三下SOC微体系结构设计作业合集

西电计科大三下SOC微体系结构设计作业合集

目录 一.VHDL设计作业 1.基于硬件描述语言的3-8译码器逻辑电路设计 2.8位双向移位寄存器设计 3.基于有限状态机的自助售票系统设计 4.按键消抖电路设计 5.同步环形FIFO设计 6.线上实验——时钟模块设计 7.线上实验——原码二位乘法器设计 8.线上实验——布斯乘法器设…
阅读更多...
新产品机会的两大来源：分析当前产品组合与创意生成工具或创造性思维技术

新产品机会的两大来源：分析当前产品组合与创意生成工具或创造性思维技术

一、引言 在快速变化的商业世界中&#xff0c;企业/组织若想保持竞争力并持续繁荣&#xff0c;就必须不断寻找新产品机会。这些机会并非凭空而来&#xff0c;而是源于&#xff1a;1. 分析当前产品组合&#xff0c;找出可以进行产品改进或产品线延伸的领域。2.创意生成工具或创…
阅读更多...
【JAVA】基础学习03变量和关键字

【JAVA】基础学习03变量和关键字

文章目录 JAVA变量与运算符1.关键字&#xff08;keyword&#xff09;2.标识符( identifier)2.1命名规则2.2命名规范2.3变量作用和类型2.3.1整型变量2.3.2补充&#xff1a;计算机存储单位2.3.3浮点类型&#xff1a;float、double2.3.4 关于浮点型精度的说明2.3.5 字符类型&#…
阅读更多...
docker部署python

docker部署python

1.部署python 1.1安装docker&#xff08;按这个操作就可以&#xff09; http://t.csdnimg.cn/cezmt 1.2拉取python镜像&#xff0c;一般拉取收藏量最高的那个 sudo docker search python 1.3拉取python镜像 #可以设置版本号&#xff0c;也可以不设置版本号&#xff0c;不…
阅读更多...
外卖配送时间预测项目

外卖配送时间预测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 项目背景 外卖服务的兴起: 随着互联网技术和移动应用的发展&#xff0c;外卖成为一种日益普及的餐饮服务方式。顾客通过餐厅、杂货店的网站或移…
阅读更多...
全球范围内2nm晶圆厂建设加速

全球范围内2nm晶圆厂建设加速

随着人工智能浪潮席卷而来&#xff0c;先进制程芯片的重要性日益凸显。当前&#xff0c;3nm工艺节点是行业内最先进的节点。与此同时&#xff0c;台积电、三星、英特尔、Rapidus等厂商正积极布局建设2nm晶圆厂。台积电与三星此前计划于2025年量产2nm芯片&#xff0c;而Rapidus则…
阅读更多...
嵌入式中常见的面试题分享

嵌入式中常见的面试题分享

1.关键字static的作用是什么&#xff1f;为什么static变量只初始化一次&#xff1f; 1&#xff09;修饰局部变量&#xff1a;使得变量变成静态变量&#xff0c;存储在静态区&#xff0c;存储在静态区的数据周期和程序相同&#xff0c; 在main函数开始前初始化&#xff0c;在退…
阅读更多...
java：6 数组（3）

java：6 数组（3）

文章目录 14. 二维数组14.1 定义14.2 二维数组的使用14.3 练习 【老韩视频p175-】 14. 二维数组 14.1 定义 多维数组我们只介绍二维数组&#xff1a; 二维数组的应用场景&#xff1a;比如我们开发一个五子棋游戏&#xff0c;棋盘就是需要二维数组来表示。请用二维数组输出如下…
阅读更多...
【漏洞复现】某科技X2Modbus网关多个漏洞

【漏洞复现】某科技X2Modbus网关多个漏洞

漏洞描述 最近某科技X2Modbus网关出了一个GetUser的信息泄露的漏洞，但是经过审计发现该系统80%以上的接口均是未授权的，没有添加相应的鉴权机制，以下列举多个未授权接口以及获取相关敏感信息的接口。 免责声明 技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律…
阅读更多...
[C++初阶]初识C++(一)—————命名空间和缺省函数

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

声明: 本篇文献内容选自百度文库、比特就业课 代码内容部分选自比特就业课 一、命名空间 1.什么是命名空间 在编程语言中&#xff0c;命名空间是一种特殊的作用域&#xff0c;它包含了处于该作用域中的所有标示符&#xff0c;而且其本身也是由标示符表示的。命名空间的使用目…
阅读更多...
C++ //练习 11.12 编写程序，读入string和int的序列，将每个string和int存入一个pair中，pair保存在一个vector中。

C++ //练习 11.12 编写程序，读入string和int的序列，将每个string和int存入一个pair中，pair保存在一个vector中。

C Primer&#xff08;第5版&#xff09; 练习 11.12 练习 11.12 编写程序&#xff0c;读入string和int的序列&#xff0c;将每个string和int存入一个pair中&#xff0c;pair保存在一个vector中。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023