声明式导航传参详情

news2024/11/27 1:19:15

1 动态路由传参

路由规则path ->/article/:aid
导航链接  <router-link to="/article/1">查看第一篇文章</router-link>
组件获取参数: this.$route.params.aid

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

注意:这两个必须匹配上

 

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

 

接收方式一:

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

{{$route.pararms.aid}}

接受方式二:

在js中拿值

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

2、 查询参数传参数

路径?参数1=值&参数2=值
路由规则path -> /路径
导航链接 <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/1349495.html

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

相关文章

实战入门 K8s剩下三个模块

1.Label Label是kubernetes系统中的一个重要概念。它的作用就是在资源上添加标识&#xff0c;用来对它们进行区分和选择。 Label的特点&#xff1a; 一个Label会以key/value键值对的形式附加到各种对象上&#xff0c;如Node、Pod、Service等等 一个资源对象可以定义任意数量…

信创之国产浪潮电脑+统信UOS Linux操作系统体验10:visual studio code中调试C++程序

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 老猿在CSDN的《信创之国产浪潮电脑统信UOS操作系统体验2&#xff1a;安装visual studio code和cmake搭建C开发环镜》介绍了在国产浪潮电脑统信UOS操作系统中安装visual studio code和cmake搭建C开…

2.3物理层下面的传输媒体

目录 2.3物理层下面的传输媒体2.3.1导引型传输媒体1.双绞线2.同轴电缆3.光纤 2.3.2非导引型传输媒体无线电微波通信 2.3物理层下面的传输媒体 传输媒体是数据传输系统中在发送器和接收器之间的物理通路 两大类&#xff1a; 导引型传输媒体&#xff1a;电磁波被导引沿着固体媒体…

linux下docker搭建Prometheus +SNMP Exporter +Grafana进行核心路由器交换机监控

一、安装 Docker 和 Docker Compose https://docs.docker.com/get-docker/ # 安装 Docker sudo apt-get update sudo apt-get install -y docker.io# 安装 Docker Compose sudo apt-get install -y docker-compose二、创建配置文件及测试平台是否正常 1、选个文件夹作为自建…

jenkins+pytest+allure

jenkinspytestallure allure下载地址 Releases allure-framework/allure2 GitHub allure环境变量配置 allure --version 查看版本(确定是否配置完成) python安装allure插件 pip install allure-pytest pytest的运行指令 pytest -sv test_demo.py 开发完毕后将代码上传到…

【Unity自制手册】基于Unity中物体移动相关方法和API集锦(动图详解)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

关于python解析mf4中二维信号数据的注意事项

python解析mf4中的信号数据一般用np.ndarray存储&#xff0c;但是mf4中的一个信号有时不一定是一维数据&#xff0c;有时会是一个二维的&#xff0c;没错&#xff0c;就是一个信号数据就是二维的&#xff0c;这时候&#xff0c;np数组的每个元素也是一个数组&#xff0c;这个时…

Docker support for NVIDIA GPU Accelerated Computing on WSL 2

Docker support for NVIDIA GPU Accelerated Computing on WSL 2 0. 背景1. 安装 Docker Desktop2. 配置 Docker Desktop3. WLS Ubuntu 配置4. 安装 Docker-ce5. 安装 NVIDIA Container Toolkit6. 配置 Docker7. 运行一个 Sample Workload 0. 背景 今天尝试一下 NVIDIA GPU 在…

服装店收银系统不只是收银 还需要线上商城和线上批发

一个综合性的服装店收银系统可以结合线上商城和线上批发功能&#xff0c;提供以下特点和优势&#xff1a; 线上商城&#xff1a;将服装店的商品信息同步到线上商城平台&#xff0c;让顾客可以通过网站或移动应用程序浏览和购买商品。线上商城可以实现在线支付、订单跟踪、售后服…

Redis的集群模式:主从 哨兵 分片集群

基于Redis集群解决单机Redis存在的问题&#xff0c;在之前学Redis一直都是单节点部署 单机或单节点Redis存在的四大问题&#xff1a; 数据丢失问题&#xff1a;Redis是内存存储&#xff0c;服务重启可能会丢失数据 > 利用Redis数据持久化的功能将数据写入磁盘并发能力问题…

机器学习的分类与经典算法

机器学习算法按照学习方式分类&#xff0c;可以分为有监督学习&#xff08;Supervised Learning&#xff09;、无监督学习&#xff08;Unsupervised Learning&#xff09;、半监督学习&#xff08;Semi-supervised Learning&#xff09;、强化学习&#xff08;Reinforcement Le…

【LMM 004】LLaVA-RLHF:用事实增强的 RLHF 对齐大型多模态模型

论文标题&#xff1a;Aligning Large Multimodal Models with Factually Augmented RLHF 论文作者&#xff1a;Zhiqing Sun, Sheng Shen, Shengcao Cao, Haotian Liu, Chunyuan Li, Yikang Shen, Chuang Gan, Liang-Yan Gui, Yu-Xiong Wang, Yiming Yang, Kurt Keutzer, Trevor…

树莓派4B-Python使用PyCharm的SSH协议在电脑上远程编辑程序

目录 前言一、pycharm的选择二、添加SSH的解释器使用总结 前言 树莓派的性能始终有限&#xff0c;不好安装与使用高级一点的程序编辑器&#xff0c;如果只用thonny的话&#xff0c;本人用得不习惯&#xff0c;还不如PyCharm&#xff0c;所以想着能不能用电脑中的pycharm来编写…

软件测试面试总结,备战金三银四

测试技术面试题 1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 参考答案&#xff1a; 兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行&#xff0c;即是通常说的软件的可移植性。 兼容的类型&#xff0c;如果细分的话&#x…

【现代信息检索】国科大何苯老师现代信息检索课程作业 —— 第三次作业

1 docID判断 1判断 2100200311411510610710810901100111111211 表 1 评判情况 表 1 1 1 中是两个判定人员基于某个信息需求对 12 12 12 个文档进行相关性判定的结果&#xff08;0 不相关&#xff0c;1 相关&#xff09;。假定我们开发了一个 IR 系统&#xff0c;针对该…

【C语言】大小端字节序详解

文章目录 前言引入大小端字节序大小端字节序的定义为什么会出现大小端之分示例&#xff1a;设计一个小程序来判断当前机器的字节序改进写法&#xff08;利用联合体成员共用同一块内存空间的特点&#xff09; 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…

假两件风衣外套,你喜欢吗?

这款假两件设计的连帽风衣外套,,姐妹们喜欢吗? 宽松版型对身材包容性很强&#xff0c;韩系慵懒风颜色很舒服 时尚百搭怎么穿都好看系列 做了腰部可调节抽绳&#xff0c;想要修身一点的可以自己调节哈 袖口处也做了金属按扣调节&#xff0c;防风保暖 这件风衣也很好搭配&a…

【C++】命名空间、输入输出、缺省参数和函数重载详解

文章目录 前言命名空间命名空间的定义命名空间的使用 C输入输出缺省参数缺省参数定义缺省参数分类 函数重载函数重载的概念函数名修饰规则extern "C"的使用 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; C 是一门强大而灵活的编程语言…

linux释放交换空间-Swap

确保剩余内存比swap内存空间大&#xff0c;再执行以下操作&#xff0c;否则会宕机&#xff01; 查看swap分区 swapon -s 会查看到你的swap分区位置 停止swap分区 停止swap分区是将swap内存释放到实际内存中 swapoff /dev/dm-1开启swap分区 swap分区内存成功释放到实际内…

ant-design-vue的form表单全局禁用不生效

文章目录 一、问题二、解决2.1、4.0之前的版本2.2、4.0开始的版本 三、最后 一、问题 ​ 实际使用ant-design-vue在开发表单的时候或许会遇到编辑与查看的需求&#xff0c;但是查看的时候表单不允许编辑&#xff0c;ant-design-vue的官方是没有像element一样提供全局disabled属…