本人使用 vue2 开发个在移动端展示的单页网站。其中有个分页的项目列表,数据都是通过 ajax 加载的,通过点击列表里的内容可以查看项目详细内容。
但是返回的时候,分页列表又要重新加载。以致于丢失了之前浏览的位置和数据。
我已经按照作者的说明,开启 histroy 模式,以及后端进行了路径的返回。但是返回时候, ajax 依然再次请求,同时数据也重新加载了。
想请问下,如何才能让返回的时候,保持原来的样子不变?不重新加载数据?
1
murmur 2017-01-08 18:52:57 +08:00 1
vux 是这样设计的,(因为我没用过 redux ,也是刚开始用的,下面理解可能错),他在最主那个 component 监听了路由的变化,如果有新的视图加进去,就给这个视图编一个比当前视图更大的值,这样比如 3->4 就是新开,需要加载数据,如果是 4->3 就是后退,用原来数据渲染就可以了
不过这个设计有个麻烦之处就是一次因为只有一个 route view ,连滚动条的状态你都要保存到 state 里,否则后退就不真实了 |
2
ferrum 2017-01-08 19:00:19 +08:00 via iPhone 1
现在这种点击链接就加载是一般 app 的正常情况,这样能保证页面上显示的都是最新数据。
如果不怎么做的话,可以在 vuex 里添加一个 flag , flag 为 true 时就发送请求, false 则不发送。然后点击进去详情列表时将 flag 设置为 false 。 但这样会让复杂度增加,你还需要考虑,哪些情况下,是一定要重新加载的。 |
3
murmur 2017-01-08 19:19:48 +08:00
更正一点,貌似 vue-router 可以保存滚动条状态
另外我感觉好奇的是,以前自己做路由,放一堆 div 在那扔着,新的 div 就要加载数据,后退就一个 display 的事啥状态都在那 现在换了高级组件反倒啥都得自己来了。。 |
4
XiaoxiaoPu 2017-01-08 19:25:43 +08:00 1
keep-alive
|
5
ss098 2017-01-08 20:39:38 +08:00 via Android 1
|
6
Eoss OP @murmur 我并没有用到 vuex , vue-router 确实可以保存滚动条的状态。但是我现在的情况是,后退就要重新加载数据。不管用的浏览器后退还是 vue-router 的 go(-1)。
@ferrum 你意思是说,是不是如果我在后退的时候不发送 ajax 请求,那么后退后就能够显示上一个状态吗? @XiaoxiaoPu keep-alive 不是只对拥有 v-bind:is 属性的组件才有效?我是用 vue-router 切换视图的,每个视图里引入若干组件。只有一个 route view 。 @ss098 看了下,发现你博客后退的时候,依然是进行了请求。虽然是做了缓存,在断网下后退也能正常显示页面。但是还不清楚能不能达到我的要求。还要实际下。 感谢各位。我想我更细说下我的需求或许更好。 我这边是做一个商品的搜索。然后有一个“搜索结果页面”,列出了很多商品,下拉的话,还会加载更多。然后点击商品会进入“商品详情页面”。 现状是,从“商品详情页面”后退到“搜索结果页面”时候,“搜索结果页面”的数据是空的,并且会重新执行搜索方法请求数据。就像是刚刚进来“搜索结果页面”一个样子。以致于我都不知道我浏览到了哪一个商品了。 我希望的结果是,后退的时候,“搜索结果页面”依然是上一次的状态。这样我就知道我浏览到了哪里。以及可以继续浏览后面的内容。 |
7
ferrum 2017-01-08 22:38:54 +08:00 via iPhone
@Eoss 你可以试一下啊,我感觉是这样的,至少用 vue-router 管理路由应该是这样的,因为点击其他链接的时候,页面并没有刷新。
如果没用 vuex ,就用个绑定在 window 对象上的全局变量作为 flag ,试试就知道。 |
8
XiaoxiaoPu 2017-01-08 22:45:33 +08:00
@Eoss 在 route-view 外面包上 keep-alive 就行了
|
9
Eoss OP |
10
ihuguowei 2017-01-09 04:45:21 +08:00
本地存储 localstorage
|
11
1340641314 2017-01-09 08:49:19 +08:00
楼主可以参考下我的: https://github.com/lzxb/vue-cnode/tree/master/src/lib/route-data
自己创建了一个模块,来保存对应 url 的数据 |