动态路由传参与查询参数传参详情

news2025/1/17 3:43:16

动态路由传参

路由规则path :/article/:aid
组件获取参数: this. $route. params.aid

如果想要所有的值,就用this. $route. params

注意:这两个必须匹配

如果是多个参数,path :/article/:aid/:name就写两个参数

接收方式一:

在模板中接受:this可以省略

{{$route.pararms.aid}}

接受方式二:

在js中拿值

console.log(this.$route.params.aid)

查询参数传参

是通过问号拼接的  

导航链接<router-link to="/article?id=1">查看第 -篇文章</ router-link>
组件获取this. $route. query.id

如果是多个参数,就用&(与):

/路径?参数1=值&参数2=值

<router-link to="/article?id=1&name=lisi">查看第一 篇文章</ router-link>

如果查询参数想拿到多个参数,可以打印两次

console. log(this. $route. query.id)
console. log(this .$route . query . name )

区别:

动态参数:(比较适合多个参数传参)

  • 跟路径有关系,传具体的值

  • 动态通过params拿值

查询参数:

  • 跟路径没有关系,是通过?拼接

  • 查询通过query拿值

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

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

相关文章

Jupyter Notebook又一地理数据可视化扩展!

本次分享一个Jupyter Notebook地理数据可视化扩展&#xff1a;pyl7vp pyl7vpPythonl7vp&#xff0c;如其名&#xff0c;是l7vp在Python3方向的封装&#xff0c;l7vp是蚂蚁集团AntV数据可视化团队开发的地理空间智能应用研发开源平台。 通过pyl7vp可在Jupyter Notebook中轻松完…

day52 算法训练|动态规划part13

参考&#xff1a;代码随想录 300.最长递增子序列 1. dp[i]的定义 本题中&#xff0c;正确定义dp数组的含义十分重要。 dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长度 为什么一定表示 “以nums[i]结尾的最长递增子序” &#xff0c;因为我们在 做 递增比较的时…

Unity UnityWebRequest 在Mac上使用报CommectionError

今天是想把前两天写的Demo拿到Mac上打个IPA的完事我发现 在运行时释放游戏资源的时候UnityWebRequest返回的结果不是Success 查看Log发现是 req.result 是CommectionError error是 Cannot connect to destination host 代码如下&#xff1a; UnityWebRequest req UnityWebRequ…

磁盘管理-------RAID卡

目录 一、RAID概述 二、常见类型 &#xff08;一&#xff09;RAID 0 &#xff08;二&#xff09;RAID 1 &#xff08;三&#xff09;RAID 5 &#xff08;四&#xff09;RAID 6 &#xff08;五&#xff09;RAID 10 &#xff08;六&#xff09;总结 三、创建RAID &…

据报道,微软的下一代 Surface 笔记本电脑将是其首款真正的“人工智能 PC”

明年&#xff0c;微软计划推出 Surface Laptop 6和 Surface Pro 10&#xff0c;这两款设备将提供 Arm 和 Intel 两种处理器选项。不愿意透露姓名的不透露姓名人士透露&#xff0c;这些新设备将引入先进的人工智能功能&#xff0c;包括配备下一代神经处理单元 (NPU)。据悉&#…

(学习打卡1)重学Java设计模式之设计模式介绍

前言&#xff1a;听说有本很牛的关于Java设计模式的书——重学Java设计模式&#xff0c;然后买了(*^▽^*) 开始跟着小傅哥学Java设计模式吧&#xff0c;本文主要记录笔者的学习笔记和心得。 打卡&#xff01;打卡&#xff01; 设计模式介绍 一、设计模式是什么&#xff1f; …

macos 打开终端提示 You have new mail. 去除方法

这个提示信息是macos里面的mail消息提示, 如果需要查看详细的信息可以在终端输入 mail 命令即可查看所有信息, 这些信息都保存在 /private/var/mail/xxx 文件中 xxx 是你的macos的登录用户名, 要去除这些提示,只需要删除这个文件即可 # 删除mail信息存储文件 sudo rm -rf /…

【计算机毕业设计】python+django数码电子论坛系统设计与实现

本系统主要包括管理员和用户两个角色组成&#xff1b;主要包括&#xff1a;首页、个人中心、用户管理、分类管理、数码板块管理、数码评价管理、数码论坛管理、畅聊板块管理、系统管理等功能的管理系统。 后端&#xff1a;pythondjango 前端&#xff1a;vue.jselementui 框架&a…

Maven项目提示Ignored pom.xml问题

1 环境 &#xff08;1&#xff09;IDEA开发工具&#xff1a;2022.2.1 &#xff08;2&#xff09;JDK&#xff1a;Java17&#xff08;Spring6要求JDK最低版本是Java17&#xff09; &#xff08;3&#xff09;Spring&#xff1a;6.1.2 &#xff08;4&#xff09;Maven 3.8.8 2 …

uni-app API接口扩展组件(uni-ui)

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

LV.13 D7 交叉编译工具链 学习笔记

一、交叉编译 1.1 编译原理 机器码&#xff08;二进制&#xff09;是处理器能直接识别的语言&#xff0c;不同的机器码代表不同的运算指令&#xff0c;处理器能够识别哪些机器码是由处理器的硬件设计所决定的&#xff0c;不同的处理器机器码不同&#xff0c;所以机器码不可移植…

如何正确使用docker搭建redis服务器,安装gcc和make以及出现错误时的解决办法

搭建redis服务器 目录 搭建redis服务器 &#xff08;1&#xff09;开启docker&#xff0c;并查看是否开启成功 &#xff08;2&#xff09;启动上面创建的ssrf容器&#xff0c;并进入ssrf容器 &#xff08;3&#xff09;进入opt&#xff0c;然后下载redis-5.0.5.tar.gz &a…

往期精彩推荐

所有的内容都在这个博客中&#xff0c;此博客为推广导航博客&#xff0c;过后会删掉https://blog.csdn.net/weixin_41620184/article/details/135042416 往期精彩&#xff1a;快来学习吧~~~ 机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归PySpark大数据处…

Spark编程实验四:Spark Streaming编程

目录 一、目的与要求 二、实验内容 三、实验步骤 1、利用Spark Streaming对三种类型的基本数据源的数据进行处理 2、利用Spark Streaming对Kafka高级数据源的数据进行处理 3、完成DStream的两种有状态转换操作 4、把DStream的数据输出保存到文本文件或MySQL数据库中 四…

uniapp中uview组件库的丰富Upload 上传上午用法

目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组&#xff0c;元素为对象)&#xff0c;显示预置的图片。其中元素的url属性为图片路径 <template>…

【VSCode】关闭双击shift出现搜索

原因 有时候总是手滑按两下shift&#xff0c;每次都会弹出如下图的搜索框&#xff0c;导致很不方便 解决办法 找到该文件 C:\Users\admin\.vscode\extensions\k--kato.intellij-idea-keybindings-1.5.12\package.json&#xff08;admin是自己的用户名&#xff09; 然后关键字…

java go c++ 开源全文搜索引擎

Apache Lucene Java 全文搜索框架 许可证&#xff1a;Apache-2.0 开发语言&#xff1a;Java 官网&#xff1a;https://lucene.apache.org/ Apache Lucene 是完全用 Java 编写的高性能、功能齐全的全文检索引擎架构&#xff0c;提供了完整的查询引擎和索引引擎、部分文本分析引…

python+django高校教材共享管理系统PyCharm 项目

本中原工学院教材共享平台采用的数据库是mysql&#xff0c;使用nodejs技术开发。在设计过程中&#xff0c;充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。系统所要实现的功能分析&#xff0c;对于现在网络方便的管理&…

Cisco模拟器-跨交换机实现VLAN

计要求将两台相互连接的交换机上的VLAN号全局使用&#xff0c;技术上可以使用TRUNK技术的数据包标记功能来实现。 通过设计&#xff0c;可以对多台交换机进行整合&#xff0c;提高网络设备的利用率、降低网络工程的成本&#xff0c;同时也可以简化网络配置。 交换机0配置&…

从0开始界面设计师 Qt Designer

QT程序界面的 一个个窗口、控件&#xff0c;就是像上面那样用相应的代码创建出来的。 但是&#xff0c;把你的脑海里的界面&#xff0c;用代码直接写出来&#xff0c;是有些困难的。 很多时候&#xff0c;运行时呈现的样子&#xff0c;不是我们要的。我们经常还要修改代码调整界…