Vue 页面间传值

传值是最好将字典，数组类型的 转成json字符串比较好

JSONstringify(item)

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

如果在微信中 下面有 <- -> 前进返回 箭头 就要用 name 这种方式push 下一个页面是可以到下一个页面，但是单按右箭头返回时是返回不到先前界面的

因为它记录的是页面路劲，所以如果想要实现可以返回的界面切换最好要用 path 路径来push

//本地存

//用的时候取

还有一个 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：windowlocalStorage;；sessionStorage：windowsessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着>

如果您的系统无法识别Vuewindowg文件，那么您可以尝试使用文件查看软件检查Vuewindowg文件是否已经损坏，如果发现文件有损坏，建议您可以尝试使用数据恢复软件恢复Vuewindowg文件，以便正常打开此文件。

总结一下能够记住的问题。第一个是返回上个界面记住上次浏览的位置，第二个是滚动加载更多的分页吧。

嘛，遇见问题第一件事干嘛。百度啊，看思路啊。思想比较明确，尤其是vue，貌似生来就与vuex判定在一起了嘛。大概思路就是离开页面时保存位置，回到界面时利用滚动到那个位置就行了。网上的回答是这样的。

       迫不及待试了一下。嗯，可是beforeRouteLeave函数不调用啊喂，这怎么办，又是一顿百度，无果，无奈改用beforeDestory函数，猜测原因可能是我写这个函数的组件是路由组件的子组件，待验证。

      再试一下，感觉还是很奇怪啊，就是位置大概在超过一个屏幕高度后就不准了有木有，一顿consolelog调试。（目前只会这样调试。见笑了）发现离开时记录的位置根本不准确，嗯，记录方式大概就是vuex中设置一个position的state，离开的时候把windowscrollY保存进去。一顿各种测试，再次改变做法，不在组件钩子中记录，改在路由事件中记录历史位置，解决位置坐标记录不准的问题。（原因再次猜测：我写那个beforeDestory函数所在的组件里面有一个循环生成很多子组件，然后再调用beforeDestory时前面的子组件已经销毁，所以获取到的windowscrollY值不对且很小，技术不够，暂时找不到验证方法）

    位置有了，剩下的就是返回时windowscrollTo到指定位置，发现依然存在问题，就是位置不准且滚动位置很奇怪。这个问题很好猜测，大概就是界面还没渲染出来就调用了windowscrollTo方法这样的，因为我在created钩子中写过获取获取的动作，所以滚动动作就加在数据成功后，遂解决。

嘛，其实做的时候遇见过还有一些问题，比如刚开始我的做法的vue-router中指定为history模式，并设置scrollBehavior函数，大概是这样

但是位置返回不准确，应该是我在created中获取数据后有刷新dom *** 作导致的。

在以前的文档中，我们构建了vue项目的整体架构，详见 vue入门：vue项目架构设计起步 ，现在我们主要对其中的api接口封装进行完善，并将过程做个记录，与之分享。

很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如：

在前端项目开发中，从整体架构出发，我们可以将项目中所有api进行封装，从而便于我们进行统一管理。

在src目录下，新建api文件夹，在api文件夹下创建indexjs和apijs。

1、apijs。主要用来统一管理项目所有api请求。 如下：

import axios from 'axios'

let host = windowgApiUrl

// 获取主页信息

export const getindex = params => { return axiosget(`${host}/api/index/`, { params: params }) }

// 获取城市信息

export const getcity = params => { return axiosget(`${host}/api/city/`) }

// 获取详细信息

export const getdetail = params => { return axiosget(`${host}/api/detail/`, { params: params }) }

// 注册

export const postRegister = params => { return axiospost(`${host}/api/register/`, { params: params }) }

2、indexjs。主要用来输出api，供外部引入。 如下：

import as api from '/api'

export default api

3、在组件中调用api接口 。例如：

这样，我们就可以在apijs中查阅到项目中所有api接口的调用，便于接口的管理。

以上就是关于Vue 页面间传值全部的内容，包括:Vue 页面间传值、vue调用下载接口d出保存文件窗口、vuewindow.g识别不了等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！