vuerouter声明式导航

声明式导航-跳转传参数

1.查询参数传参

语法:to ''/path?参数名=值''

2.对应页面组件接受传来的值

''$router.query.参数名''

2.动态路由传参

1.配置动态路由

2.配置导航连接

to=''/path/参数值''

 

3.对应页面组件接收传递过来的值

#route.params.参数名

多个参数传递:查询参数的方式

 

动态路由参数可选符,在动态路由后面加?表示参数可传可不传

结果对比

有参

无参

 

网页重定向

Vue路由-404

1.在views组件中创建404组件

404

<template><div><h1>404NotFound</h1></div>
</template><script>export default {}</script><style></style>

2.在路由器中导入组件并匹配路由

 路由设置

设置history

编程式基本跳转

1.路径跳转

path路径跳转

this.router.push

<template><div><p>我的朋友灰灰</p><p>我的朋友白白</p><!-- 将刚刚的声明式导航进行传递值 --><p>{{$route.query.key}}</p><p>{{$route.query.age}}</p><button @click="goinfo">跳转info</button></div></template><script>export default {methods:{goinfo(){// 通过router跳转this.$router.push('/info')}}}</script><style></style>

 

点击

 

name命名路由跳转

 

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

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

相关文章

情感感知OCR:整合深度学习技术提升文字识别系统的情感理解能力

摘要&#xff1a;随着深度学习技术的发展&#xff0c;文字识别&#xff08;OCR&#xff09;系统在识别准确率和速度上取得了长足的进步。然而&#xff0c;在处理文本时&#xff0c;仅仅依靠字符和词语的识别并不足以满足用户对信息的全面理解需求。本文提出了一种新颖的方法&am…

Redis五大基本数据类型介绍及其使用场景

文章目录 1 String&#xff08;字符串&#xff09;应用场景 2 List&#xff08;列表&#xff09;应用场景 3 Set&#xff08;集合&#xff09;4 sorted set&#xff08;有序集合&#xff09;应用场景 5 hash&#xff08;哈希&#xff09;应用场景 Redis 是一个开源&#xff0c;…

彩信群发推广:四大革新优势,引领营销新时代!

在数字化营销日益盛行的今天&#xff0c;短信群发已成为我们生活中不可或缺的一部分。然而&#xff0c;您是否想过&#xff0c;除了传统的文本短信&#xff0c;还有一种更为丰富、更具吸引力的推广方式——彩信群发推广&#xff1f;彩信不仅融合了图片、文字、音频、动画和视频…

【漏洞复现】泛微OA E-Cology ln.FileDownload文件读取漏洞

漏洞描述&#xff1a; 泛微OA E-Cology是一款面向中大型组织的数字化办公产品&#xff0c;它基于全新的设计理念和管理思想&#xff0c;旨在为中大型组织创建一个全新的高效协同办公环境。泛微OA E-Cology ln.FileDownload存在任意文件读取漏洞&#xff0c;允许未经授权的用户…

轨迹规划 | 图解纯追踪算法Pure Pursuit(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 纯追踪算法原理推导2 自适应纯追踪算法(APP)3 规范化纯追踪算法(RPP)4 仿真实现4.1 ROS C仿真4.2 Python仿真4.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划…

快速配置 Nginx 来实现 GPT 流式传输

目录 1. Nginx 参考配置2. Nginx 核心参数3. 其他参数 场景&#xff1a;代理 ChatGPT、代理各种 GPT 工具套壳等。 1. Nginx 参考配置 支持 GPT 流式访问的配置如下&#xff0c;请根据实际需求适当取舍即可&#xff1a; server {listen 80;server_name chat.test.com; # 绑…

如何推动物联网的未来?——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网作为连接物理世界和数字世界的桥梁&#xff0c;正逐渐改变着我们的生活和工作方式。在工业领域&#xff0c;物联网技术的应用不仅提高了生产效率&#xff0c;还实现了对设备的智能化管理和维护。而工业网关作为物联网的重要组成部分…

java数据保留几位小数的问题

String.format()&#xff1a; 这个方法在格式化输出时非常常用&#xff0c;可以方便地控制小数位数&#xff0c;并且语法简洁易懂。它不仅可以用于格式化浮点数和双精度数&#xff0c;还可以用于格式化其他数据类型&#xff0c;如整数、字符串等。 示例代码&#xff1a; BigD…

仪器校准中,CNAS对报告的认可评审要求有哪些?

CNAS扩项时&#xff0c;常常会有关于对报告认可的相关要求&#xff0c;而这些要求往往有明确规范&#xff0c;那么在仪器校准中&#xff0c;CNAS对报告的认可评审要求有哪些&#xff1f; 现场评审时&#xff0c;评审组应关注抽查报告&#xff0c;评审组将现场随机抽取报告&…

酷开科技让你能够放心地把遥控器交给孩子

我国电视从诞生至今已有65个年头&#xff0c;从黑白到彩色&#xff0c;从背投到液晶&#xff0c;电视的外观随着时代技术的发展而不断变化&#xff0c;直到现在随着技术的不断迭代&#xff0c;电视的功能越来越丰富&#xff0c;电视在客厅中的地位也越来越凸显。作为家庭娱乐的…

【Linux基础】Vim保姆级一键配置教程(手把手教你把Vim打造成高效率C++开发环境)

目录 一、前言 二、安装Vim 三、原始Vim编译器的缺陷分析 四、Vim配置 &#x1f95d;预备知识----.vimrc 隐藏文件 &#x1f34b;手动配置 Vim --- &#xff08;不推荐&#xff09; &#x1f347;自动化一键配置 Vim --- (强烈推荐) ✨功能演示 五、共勉 一、前言 Vim作为…

实现字符串比较函数(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int i, result;char s1[100], s2[100];//填充数组&#xff1b;printf("请输入数组s1的…

2.分布式-算法

目录 一、限流算法有哪些&#xff1f; 1.计数器算法&#xff08;Counter-Based Algorithm&#xff09; 2.固定窗口算法&#xff08;Fixed Window&#xff09; 3.滑动窗口算法&#xff08;Sliding Window&#xff09; 4.令牌桶算法&#xff08;Token Bucket&#xff09; 5.…

生产设备数据管控要怎么做 可以实现精益生产和智能制造?

生产设备在制造过程中会产生多种类型的数据&#xff0c;这些数据对于优化生产流程、提高效率、降低成本和预防性维护等方面至关重要。需要对这些数据进行有效的采集和管理&#xff0c;以实现对生产设备数据管控。 一、生产设备数据类型包括&#xff1a; 设备运行状态数据&…

C++八股(面试题、手撕题)自用版

目录 面试题&#xff1a; 1. define inline 在编译的哪个阶段 2. const static 3. 子函数返回结构体有什么问题&#xff0c;返回对象调用了哪些函数 4. volatile关键字 5. 编译器基本原理 6. 预处理、编译、汇编、链接以及他们在操作系统上如何运作的 7. 数组和指针&a…

第十一届蓝桥杯大赛软件类决赛 Java 研究生组

文章目录 发现宝藏【考生须知】试题 A: 合数个数试题 B: 含 2 天数试题 C 阶乘约数试题 D: 本质上升序列试题 E: 迨尺天涯试题 F 循环小数试题 G: 蓝肽子序列试题 H 出租车试题 I: 答疑试题 J: 蓝跳跳 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&a…

【高阶数据结构(三)】图的遍历最小生成树问题

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:高阶数据结构专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; 高阶数据结构 1. 前言2. 图的遍…

成功案例(IF=7.4)| 脂代谢组学和蛋白质组学分析揭示多囊卵巢综合征的发病机制

研究背景 多囊卵巢综合征&#xff08;PCOS&#xff09;是女性最常见的内分泌和代谢紊乱&#xff0c;也是无排卵性不孕症和高雄激素血症的主要原因。患者的主要临床表现为月经少、不孕、高雄激素血症、肥胖、多毛、痤疮、胰岛素抵抗&#xff08;IR&#xff09;和B超下多囊卵巢改…

Electron学习笔记(六)

文章目录 相关笔记笔记说明 七、系统5、托盘图标(1)、设置托盘图标(2)、托盘图标闪烁(3)、托盘图标菜单 6、剪切板(1)、写入剪切板(2)、读取剪切板 7、系统通知8、其他(1)、使用系统默认应用打开文件(2)、接收拖拽到窗口中的文件(3)、使用系统字体 相关笔记 Electron学习笔记&…

具身智能论文(二)

目录 1. Code as Policies: Language Model Programs for Embodied Control2. Embodied Agents for Efficient Exploration and Smart Scene Description3. Embodied Agents for Efficient Exploration and Smart Scene Description4. Learning to explore informative traject…