Vue 2 —Vue Router 页面导航和参数传递

devtools/2024/11/14 21:53:51/

当从A页面跳转到B页面的时候把数据也一起传递过去,可用Vue Router 功能:

一、. this.$router.push 方法

Vue Router 是 Vue.js 的官方路由管理器,允许你在应用中进行页面导航(即跳转到不同的 URL 路径)。

this.$router.push() 是 Vue Router 提供的 API,用于跳转到新的路由(即新的页面)。它可以接受一个对象或字符串作为参数。

这里传入的是一个对象,包含了两个属性:

path:目标路径(/abc/web/batch_scan_results

query:URL 查询参数,通常用于传递数据。

二、 query 参数的使用

在 Vue Router 中,query 用于在 URL 中传递查询参数。例如,路径 /abc/web/batch_scan_results?results=someData 会将 results 作为查询参数附加到 URL 上。

这段代码中,scannedResults 被 JSON.stringify 转换成 JSON 字符串,并作为 results 参数传递。此时,浏览器的地址栏会显示类似于:

/abc/web/batch_scan_results?results=%7B%22key%22%3A%22value%22%7D 

scannedResults 数据就会作为 URL 查询参数发送到目标路由。

JSON.stringify(scannedResults) 是 JavaScript 中的标准方法,用于将 JavaScript 对象(如数组、对象等)转换成 JSON 格式的字符串。在这里,scannedResults 是一个对象或数组,使用 JSON.stringify 将其转化为字符串,便于通过查询参数传递给其他页面。

示例:

假设你在另一个页面需要获取这些数据,你可以通过 $route.query 来访问查询参数:

// 从查询参数中获取扫码结果
this.results = JSON.parse(this.$route.query.results || '[]');

 

三、总结:

  • this.$router.push():用于页面跳转。
  • path:指定目标路由路径。
  • query:通过查询参数传递数据。
  • JSON.stringify():将 JavaScript 对象转为 JSON 字符串,以便通过 URL 传递。

补充:Vue 2 中的路由导航

  • this.$router.push():用于编程式导航,即通过 JavaScript 代码实现页面跳转。
  • 如果你使用的是 <router-link> 组件,则是通过声明式导航,即通过模板的形式实现跳转。

http://www.ppmy.cn/devtools/133397.html

相关文章

aws xray通过设置采样规则对请求进行过滤

参考资料 https://github.com/aws/aws-xray-sdk-pythonpython api reference&#xff0c;https://docs.aws.amazon.com/xray-sdk-for-python/latest/reference/node api reference&#xff0c;https://docs.aws.amazon.com/xray-sdk-for-nodejs/latest/reference/ 初始化环境…

vscode Markdown

安装扩展插件 Markdown All in One Markdown Preview Enhanced Paste Image参考 Markdown 和 Visual Studio Code

8.机器学习--决策树

(⊙﹏⊙)下周有要开组会&#xff0c;不知道该说啥&#xff0c;啊啊啊啊&#x1f62b; 目录 1.基本概念 2.ID3算法 3.C4.5算法 4.CART算法 5.连续与缺失值处理 5.1.连续值处理 5.2.缺失值处理 6.剪枝处理 6.1.预剪枝策略 6.2.后剪枝策略 7.实例代码 1.基本概念 提…

林业遥感智能监测应用

林业遥感智能监测应用是一个结合了遥感技术、人工智能和大数据分析的综合性领域&#xff0c;旨在实现对森林资源的高效、精准和实时监测。以下是林业遥感智能监测应用的一些主要方面&#xff1a; 一、应用领域 森林资源调查与监测&#xff1a;通过卫星遥感影像&#xff0c;可以…

Openlayers10.2.1最新版在安卓Compose中使用的一个例子

题目 这是一个中小公司的面试题&#xff1a; Openlayers 是一个功能完善的地图引擎&#xff0c;能在WEB页面上显示瓦片地图或者矢量地图&#xff0c;官方网址是https://openlayers.org/。 1、尝试做一个安卓App&#xff0c;使用Openlayers显示高德或者百度在线地图&#xff0c…

Springboot启动流程之ApplicationContext 创建

在文章 Springboot3.3.5 启动流程&#xff08;源码分析&#xff09; 中介绍了关键流程&#xff0c;本文详细介绍 AnnotationConfigServletWebServerApplicationContext 的创建。 备注&#xff1a; 本文未作任何申明时&#xff0c;默认 springboot 版本为 3.3.5 AnnotationCon…

在Photoshop中填充图层颜色

一、使用油漆桶工具 选择油漆桶工具&#xff1a;在工具栏中找到并选择油漆桶工具&#xff08;快捷键G&#xff09;。选择图层&#xff1a;在图层面板中选择你想要填充颜色的图层。设置填充属性&#xff1a;在工具选项栏中&#xff0c;可以选择合适的填充模式、不透明度和容差值…

WPF+MVVM案例实战与特效(二十八)- 自定义WPF ComboBox样式:打造个性化下拉菜单

文章目录 1. 引言案例效果3. ComboBox 基础4. 自定义 ComboBox 样式4.1 定义 ComboBox 样式4.2 定义 ComboBoxItem 样式4.3 定义 ToggleButton 样式4.4 定义 Popup 样式5. 示例代码6. 结论1. 引言 在WPF应用程序中,ComboBox控件是一个常用的输入控件,用于从多个选项中选择一…