当从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>
组件,则是通过声明式导航,即通过模板的形式实现跳转。