声明式导航传参详情

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;…

知识库问答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;希望可以学习到很多知识。 简单介绍机…

Servlet见解3

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

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

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

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

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

学习动态规划解决不同路径、最小路径和、打家劫舍、打家劫舍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 个整数&…

基于Java SSM框架实现智能仓储管理系统项目【项目源码+论文说明】

基于java的SSM框架实现仓库管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;智能仓储系统当然也不能排除在外。智能仓储系统是以实际运用为开发背景&#xf…

ThinkPad产品如何升级BIOS程序

操作步骤: 重要提示&#xff1a; 更新BIOS存在风险&#xff01;如果您的电脑在此过程中出现死机&#xff0c;系统崩溃或断电&#xff0c;则BIOS或UEFI固件程序可能会损坏&#xff0c;这将使您的电脑无法启动。 由于BIOS的版本或者在升级过程中出错&#xff0c;可能会造成不可…

移动客服系统必备功能:提升用户体验与工作效率的关键要素

在快速发展的时代&#xff0c;工作的节奏也越来越快&#xff0c;也许您正在高铁上或者正在午餐时&#xff0c;就有客户提出需求来。所以&#xff0c;移动客服系统的需求也越来越多&#xff0c;那么移动客服系统怎么样&#xff1f;接下来&#xff0c;我们一起来看看移动客服系统…

python-39-flask+nginx+Gunicorn的组合应用

flask nginx Gunicorn 王炸 1 flasknginxgunicornsupervisor 1.1 myapp.py from flask import Flask app Flask(__name__)app.route("/") def test_link():return "the link is very good"if __name__"__main__":app.run()默认是5000端口…

CSS去掉按钮阴影 | css去掉按钮边框 | 注意改变搜索的关键词、搜索方式

上图是在谷歌浏览器中运行的结果 button {box-shadow: none;height: 50px;width: 100px;background-color: white;border-color: white; }写了以上的css&#xff0c;发现按钮还是有阴影一样的东西&#xff0c;查阅网络资料的时候也一直在搜索“如何去掉按钮阴影”&#xff0c;…

Linux调试工具—gdb

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;HEART BEAT—YOASOBI 2:20━━━━━━️&#x1f49f;──────── 5:35 &#x1f504; ◀️ ⏸ ▶️ ☰ …

【Delphi】IOS上架踩坑记 - 2024年第一天

目录 一、前言&#xff1a; 二、IOS程序上架网址 三、踩坑记 1. 关于版本中的 CFBundleIdentifier 参数&#xff08;Transporter 提示&#xff09; 2. IOS APP 程序图标要求&#xff08;Transporter 提示&#xff09; 3. 关于版本中的 CFBundleShortVersionString 参数&a…

收入支出记录,对需要的账目明细进行颜色标记

面对繁杂的账单和财务数据&#xff0c;你是否曾为记账而感到苦恼&#xff1f;别担心&#xff0c;我们为你带来了一款全新的记账软件——晨曦记账本&#xff0c;这不仅仅是一个简单的记账工具&#xff0c;更是你财务管理的得力助手。 所需工具&#xff1a; 一个【晨曦记账本】…