当前位置： 首页>前端>正文

vue3 element table 向上层传递数据 vue页面传递数据

前端2024-04-26 23:38:57

vue在页面之间传递数据

页面传值

一、使用$router.push的方法

1 最常用的莫过于参数传值

传值是最好将字典，数组类型的 转成json字符串比较好
JSON.stringify(item)

this.$router.push({
  name: 'TripFlightDetail',//页面名字
  path:'/TripFlightDetail',//页面路劲 和上面名字任意一个都可以
  query: {flight: JSON.stringify(item)} // 参数传值
})
这种也可以
this.$router.push({
     name: 'TripFlightDetail’,
     params: {flight: this.currentRecomd}
// })

 

然后到下一个页面 的mounted()函数中取值

let flight =  JSON.parse(this.$route.query.flight) // 取

有个问题需要注意：

如果在微信中 下面有 <- -> 前进返回 箭头 就要用 name 这种方式push 下一个页面是可以到下一个页面，但是单按右箭头返回时是返回不到先前界面的
因为它记录的是页面路劲，所以如果想要实现可以返回的界面切换最好要用 path 路径来push

但是 query 传值不能太多，太多的话在微信中会闪一下 消失掉 这时候就要用另一种方式了

二、缓存传值

像全局变量： 只要存下，什么地方用什么地方取

具体使用方法用

//local存
localStorage.setItem(key,value)    
//local取
localStorage.getItem(key)
//session存
sessionStorage.setItem(key,value)
//session取
sessionStorage.getItem(key)

 

//本地存

localStorage.setItem('trip',JSON.stringify(_this.currentRecomd))    

this.$router.push({
  name: 'HotelPage',
//推页面是这里就不需要传值了
})

//用的时候取

let trip = JSON.parse(localStorage.getItem('trip'));  //取

还有一个 sessionStorage 缓存传值 和 localStorage的操作类似

但是两者是有区别的：

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。
1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
　　　　　　 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
WebStorage的优点：
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
　　　　setItem (key, value) —— 保存数据，以键值对的方式储存信息。
　　 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
　　removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
　　clear () —— 删除所有的数据
　　key (index) —— 获取某个索引的key




https://www.xamrdz.com/web/2s51935924.html

相关文章：