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.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参数时，需要提前在规则中占位。

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于springboot+vue实现的酒店客房管理系统

基于springboot+vue实现的酒店客房管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…
阅读更多...
Redis高可用主从复制与哨兵模式

Redis高可用主从复制与哨兵模式

前言 在生产环境中&#xff0c;除了采用持久化方式实现 Redis 的高可用性&#xff0c;还可以采用主从复制、哨兵模式和 Cluster 集群的方法确保数据的持久性和可靠性。 目录 一、主从复制 1. 概述 2. 作用 3. 主从复制流程 4. 部署 4.1 安装 redis 4.2 编辑 master 节…
阅读更多...
Xxxxxx

Xxxxxx

数据库 1&#xff0c;B树与B树区别 1&#xff0c;B树每个节点存ID与其他数据字段&#xff0c;B非叶子结点&#xff0c;只存ID&#xff0c;叶子结点存完整数据 好处&#xff1a;每个层级B树&#xff0c;可以存储更多的额数据&#xff0c;层级更少&#xff0c;更扁平&#xff…
阅读更多...
代码块的理解

代码块的理解

如果成员变量想要初始化的值不是一个硬编码的常量值&#xff0c;而是需要通过复杂的计算或读取文件、或读取运行环境信息等方式才能获取的一些值&#xff0c;该怎么办呢&#xff1f;此时&#xff0c;可以考虑代码块&#xff08;或初始化块&#xff09;。 代码块(或初始化块)的作…
阅读更多...
【Linux】IO多路转接

【Linux】IO多路转接

文章目录 一、selectselect函数select基本工作流程select的优缺点select的适用场景 二、pollpoll函数poll的优缺点 三、epollepoll相关系统调用epoll工作原理epoll的优点epoll工作方式对比LT和ET 一、select select是系统提供的一个多路转接接口。 select系统调用可以让我们的…
阅读更多...
(echarts)vue中循环生成多个相同的echarts图表，但数据动态、第一次渲染失败问题

(echarts)vue中循环生成多个相同的echarts图表，但数据动态、第一次渲染失败问题

(echarts)vue中循环生成多个相同的echarts图表&#xff0c;但数据动态 效果&#xff1a; 代码&#xff1a; <!-- 动态图表 --> <el-row :gutter"20"><el-col v-for"(item,index) in echartsList" :key"index" :span"10&quo…
阅读更多...
wordpress课程项目主题电脑版+手机版自适应

wordpress课程项目主题电脑版+手机版自适应

这款主题适合做资源、课程、素材等&#xff0c;演示站&#xff1a;点击查看
阅读更多...
openwrt开发包含路由器基本功能的web问题记录

openwrt开发包含路由器基本功能的web问题记录

1.这里的扫描怎么实现的先找一些luci代码&#xff0c;在openwrt21版本后&#xff0c;luci用js替换了lua写后台&#xff0c;先找一些代码路径 在openrwt15这部分代码是在这个目录下 feeds/luci/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm 里面包含…
阅读更多...
javaWeb旅游网站设计

javaWeb旅游网站设计

一、概述 1.1 项目研究背景 社会经济的发展和提高潜移默化的影响了人们对精神消费的日益看中与提高&#xff0c;所以越来越多的人们开始选择更健康有趣的生活活动&#xff0c;随之而来的旅游便成了人们消费的必选。随着旅客需求的日趋丰富和个性化&#xff0c;这势必将推动我…
阅读更多...
理解main方法的语法

理解main方法的语法

由于JVM需要调用类的main()方法&#xff0c;所以该方法的访问权限必须是public&#xff0c;又因为JVM在执行main()方法时不必创建对象&#xff0c;所以该方法必须是static的&#xff0c;该方法接收一个String类型的数组参数&#xff0c;该数组中保存执行Java命令时传递给所运行…
阅读更多...
【零基础C语言】编译和链接

【零基础C语言】编译和链接

1.翻译环境和运行环境 翻译环境&#xff1a;将源代码转化为可执行的机器指令 运行环境&#xff1a;用于执行机器指令 1.1 翻译环境 翻译环境由编译和链接两大过程构建&#xff0c;编译又可以分为三大过程&#xff1a; 【1】预处理(预编译) 【2】编译 【3】汇编 不同的.c文件经…
阅读更多...
计算机网络_工具

计算机网络_工具

从你的电脑到指定ip网站&#xff0c;用时3ms ttl TTL Time To Live 数据包存活时间 指一个数据包在经过一个路由器时&#xff0c;可传递的最长距离&#xff08;跃点数&#xff09;。每当数据包经过一个路由器时&#xff0c;其存活次数就会被减一 256 - 249 7&…
阅读更多...
什么！Intel/AMD/Apple Silicon也能本地部署的Llama工具来了

什么！Intel/AMD/Apple Silicon也能本地部署的Llama工具来了

主流的LLM都需要通过CUDA才能高效的运行在本地&#xff0c;但是随着Github上出现了Llama.cpp这个神器&#xff0c;一切都改变了。它通过AVX指令和MPI来实现CPU上并行计算&#xff0c;从而在本地计算机高效地运行各种主流的类Llama模型。同时它也支持metal&#xff0c;使得Apple…
阅读更多...
Mybatis的SQL高级查询与各符号用法

Mybatis的SQL高级查询与各符号用法

test语句里面的logparam是Mapper层传入的参数&#xff0c;读取logparam的属性不用再用#{}符号表示。 如果需要计算的式子很长&#xff0c;那么可用${}表示里面的式子是计算式&#xff0c;需要进行计算操作。同样不用通过#{logparam.Page}来读取logparam的Page属性的值&#xff…
阅读更多...
第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟

第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟

第19次修改了可删除可持久保存的前端html备忘录:换了一个特别的倒计时时钟 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><met…
阅读更多...
合同约定的绩效奖金说不给就不给了， 这合法吗？

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

目录 一、北京海淀法院参考案例 二、关于绩效奖金的性质&#xff1f; 三、绩效奖金应否发放取决于哪些因素&#xff1f; 四、员工如何举证与质证 五、提前离职的员工 是否享受当年度绩效奖金&#xff1f; 一、北京海淀法院参考案例 https://mp.weixin.qq.com/s/sq0mFCC8M…
阅读更多...
微信开发者工具编译后，页面空白，Wxml内容为空

微信开发者工具编译后，页面空白，Wxml内容为空

最近遇到了一个奇怪的问题&#xff0c;使用的uniapp运行的微信小程序&#xff0c;改动代码保存后页面就变成空&#xff0c;接口调用一切正常&#xff0c;Wxml内容为空。如下图 重新编译后&#xff0c;偶尔会报这个错误 根据错误提示&#xff0c;尝试了以下方法也没有用。 更…
阅读更多...
使用OpenCV4.9的随机生成器和文本

使用OpenCV4.9的随机生成器和文本

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;OpenCV 4.9基本绘图 下一篇&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用随机数生…
阅读更多...
STM32 移植 LVGL -- 教程图解

STM32 移植 LVGL -- 教程图解

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

【flutter封装图片/视频选择控件】

引入库 wechat_assets_picker: ^6.0.5 、video_player: ^2.5.1 # 视频播放、 flutter_screenutil: ^5.7.0 import dart:async; import dart:io; import package:generated/l10n.dart; import package:jade/configs/PathConfig.dart; import package:jade/customWidget/addImag…
阅读更多...
最新文章

Copyright @ 2022~2023