vue变量传值_Vue页⾯间传值
页⾯传值
1 最常⽤的莫过于参数传值
传值是最好将字典，数组类型的 转成json字符串⽐较好
JSON.stringify(item)
然后到下⼀个页⾯ 的mounted()函数中取值
有个问题需要注意：
如果在中 下⾯有 前进返回 箭头 就要⽤ name 这种⽅式push 下⼀个页⾯是可以到下⼀个页⾯，但是单按右箭头返回时是返回不到先前界⾯的
因为它记录的是页⾯路劲，所以如果想要实现可以返回的界⾯切换最好要⽤ path 路径来push
但是 query 传值不能太多，太多的话在中会闪⼀下 消失掉 这时候就要⽤另⼀种⽅式了
缓存传值
像全局变量： 只要存下，什么地⽅⽤什么地⽅取
sessionstorage和localstorage//本地存
//⽤的时候取
还有⼀个 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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。