声明式导航传参详情

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.mzph.cn/news/589740.shtml

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

相关文章

Spring Cloud Function SpEL注入漏洞(CVE-2022-22963)分析

一、概述 2022年3月24日&#xff0c;Pivotal修补了Spring Cloud Function中一个关键的服务器端代码注入漏洞&#xff08;Spring表达式语言注入&#xff09;&#xff0c;该漏洞有可能导致系统被攻击。Spring是一种流行的开源Java框架&#xff0c;该漏洞与另一个相关的远程代码执…

Dirichlet Process (徐亦达老师)狄利克雷过程

混合高斯模型的例子 混合高斯模型 混合高斯模型&#xff08;Mixture of Gaussians&#xff0c;简称GMM&#xff09;是一种概率模型&#xff0c;用于对复杂的数据分布进行建模。它是由多个高斯分布组合而成的混合模型&#xff0c;每个高斯分布&#xff08;称为组件&#xff09;…

86 滑动窗口判断是否有重复元素II

问题描述&#xff1a;给定一个整数数组和一个整数k&#xff0c;判断数组中是否存在两个不同的索引i和j&#xff0c;使得nums[i]nums[j],并且i和j的绝对值最多为k。 map求解&#xff1a;首先将第一个元素放入map中&#xff0c;因为它不可能与任何一个元素构成队列&#xff0c;然…

HJ108 求最小公倍数

题目&#xff1a; HJ108 求最小公倍数 题解&#xff1a; 辗转相除法求出最大公约数&#xff0c;然后求出最小公倍数。 public int gcd(int a, int b) {if (b 0) {return a;}return gcd(b, a%b);} 时间复杂度&#xff1a;O(N)

基于SpringBoot的职业生涯规划系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的职业生涯规划系统,java…

知识库问答LangChain+LLM的二次开发:商用时的典型问题及其改进方案

前言 如之前的文章所述&#xff0c;我司下半年成立大模型项目团队之后&#xff0c;我虽兼管整个项目团队&#xff0c;但为让项目的推进效率更高&#xff0c;故分成了三大项目组 第一项目组由霍哥带头负责类似AIGC模特生成系统第二项目组由阿荀带头负责论文审稿GPT以及AI agen…

pytorch深度学习笔记(共计169页,基于本人听完B站小土堆PyTorch深度学习快速入门教程所写)

一、笔记视频 pytorch深度学习&#xff08;共计169页&#xff0c;基于本人听完B站小土堆PyTorch深度学习快速入门教程所写&#xff09; 二、获取方式 方式一&#xff1a; 点击下面的链接 pytorch深度学习笔记 如果链接无法打开 直接复制下方链接即可 https://mall.bilibili.c…

如何借助边缘网关打造智慧配电房安全方案

配电房是电力系统的重要组成部分&#xff0c;通常设置有各种高压配电装置和箱柜&#xff0c;是企业安全管理的重点。传统的人工巡检和监控总是难以避免疏漏&#xff0c;导致风险隐患的产生和扩大。 随着物联网、边缘计算、设备联动控制等技术的普及应用&#xff0c;佰马针对配电…

在FC中手工创建虚拟机模板

1、Linux去除个性化信息 &#xff08;1&#xff09;编辑网卡配置文件&#xff0c;只保留以下内容&#xff08;以RHEL 7为例&#xff09; &#xff08;2&#xff09;清除主机密钥信息&#xff08;开机会自动生成&#xff09; &#xff08;3&#xff09;清除Machine ID&#xff…

机器学习概述

最近在学习机器学习的基础知识&#xff0c;在此记录一下 目前最火的机器学习框架是Scikit-Learn和pytorch&#xff0c;因此&#xff0c;之后的一段时间会使用这两种框架搭建机器学习的模型&#xff0c;相应的学习资源也会开源&#xff0c;希望可以学习到很多知识。 简单介绍机…

(C)一些题21

1.条件语句 while(x){...}中条件表达式 x 的等价写法是 B。 A. x0 B. x!0 C. x1 D. x!1 2.表达式 1!2 && 35 的值是 C。 A. True B. False C. 0 D. 1 3。. _______125__________。 #include <stdio.h> int x; void main() { x5; cude(); printf("%d\n"…

Servlet见解3

13 Cookie和Session http协议是一个无状态的协议&#xff0c;你每一个跳转到下一个页面的时候都是需要先登录才能使用&#xff0c;这样就很麻烦比如淘宝&#xff0c;没有cookie和session的话&#xff0c;用户在首页已经登录上去了&#xff0c;但是需要再次登录才能选择商品&am…

计算几何库

1、Geos GEOS 是一个用于计算几何的C/C库&#xff0c;专注于地理信息系统(GIS) 软件中使用的算法。它实现了OGC 简单特征几何模型&#xff0c;并提供了该标准以及许多其他标准中的所有空间功能。GEOS 是PostGIS、QGIS、GDAL和Shapely的核心依赖项。 它旨在包含C 中JTS的完整功…

Linux: dev: glibc: GL 定义

今天找到了这个GL的定义&#xff0c;记录一下&#xff0c;费了一些劲才找到的。&#xff08;没有想到的是#和define之间还有空格&#xff0c;导致一直搜不到想要的结果。&#xff09;是在sysdeps/generic/ldsodefs.h文件中。依赖于SHARED和rtld的定义。 #ifndef SHARED # defi…

嵌入式Linux C语言介绍

目录 一.前言 二.C语言的特点 一.前言 开发工具通常依赖于操作系统提供的各种功能和服务。许多开发工具都基于操作系统的API&#xff08;应用程序接口&#xff09;进行开发&#xff0c;这些API提供了文件处理、网络通信、图形界面等核心功能。没有操作系统的支持&#xff0c;…

使用pyqt5+qtdesign设计模仿网易云音乐客户端界面

案例效果图 设计界面效果图&#xff1a; 运行效果图&#xff1a; 本项目目前只是对界面进行了设计&#xff0c;功能都没有进行完善&#xff0c;想完善的小伙伴自己拿到UI文件之后&#xff0c;自己完善即可。 简要设计思路说明 使用QFrame将界面分割布局成如下几个部分&am…

buuctf-Misc 题目解答分解103-105

103.[GKCTF 2021]签到 追踪流发现类似flag 字符 f14g 下面有大量的是16进制字符 64306c455357644251306c6e51554e4a5a3046355355737764306c7154586c4a616b31355357704e65556c7154586c4a616b31355357704e65556c7154586c4a616b31355357704e65556c7154586c4a616b31355357704e655…

腾讯云50G通用型SSD云硬盘够用吗?

腾讯云服务器系统盘是50G通用型SSD云硬盘&#xff0c;50G系统盘够用吗&#xff1f;够用。一般来讲&#xff0c;Windows操作系统占用空间更大&#xff0c;系统盘要50GB起步&#xff1b;Linux操作系统占用空间较少&#xff0c;系统盘为20GB起步。所以&#xff0c;如果仅仅是用来安…

学习动态规划解决不同路径、最小路径和、打家劫舍、打家劫舍iii

学习动态规划|不同路径、最小路径和、打家劫舍、打家劫舍iii 62 不同路径 动态规划&#xff0c;dp[i][j]表示从左上角到(i,j)的路径数量dp[i][j] dp[i-1][j] dp[i][j-1] import java.util.Arrays;/*** 路径数量* 动态规划&#xff0c;dp[i][j]表示从左上角到(i,j)的路径数量…

归并算法排序

目录 归并排序 逆序对的数量 归并排序 题目如下&#xff1a; 给定你一个长度为 n 的整数数列。 请你使用归并排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式&#xff1a; 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&…