请问 vue2 开发中，如何使用 vue-router 做到返回不重新加载数据？

[Eoss]

本人使用 vue2 开发个在移动端展示的单页网站。其中有个分页的项目列表，数据都是通过 ajax 加载的，通过点击列表里的内容可以查看项目详细内容。

但是返回的时候，分页列表又要重新加载。以致于丢失了之前浏览的位置和数据。

我已经按照作者的说明，开启 histroy 模式，以及后端进行了路径的返回。但是返回时候， ajax 依然再次请求，同时数据也重新加载了。

想请问下，如何才能让返回的时候，保持原来的样子不变？不重新加载数据？

[murmur]

vux 是这样设计的，(因为我没用过 redux ，也是刚开始用的，下面理解可能错)，他在最主那个 component 监听了路由的变化，如果有新的视图加进去，就给这个视图编一个比当前视图更大的值，这样比如 3->4 就是新开，需要加载数据，如果是 4->3 就是后退，用原来数据渲染就可以了

不过这个设计有个麻烦之处就是一次因为只有一个 route view ，连滚动条的状态你都要保存到 state 里，否则后退就不真实了

[ferrum]

现在这种点击链接就加载是一般 app 的正常情况，这样能保证页面上显示的都是最新数据。

如果不怎么做的话，可以在 vuex 里添加一个 flag ， flag 为 true 时就发送请求， false 则不发送。然后点击进去详情列表时将 flag 设置为 false 。

但这样会让复杂度增加，你还需要考虑，哪些情况下，是一定要重新加载的。

[murmur]

更正一点，貌似 vue-router 可以保存滚动条状态
另外我感觉好奇的是，以前自己做路由，放一堆 div 在那扔着，新的 div 就要加载数据，后退就一个 display 的事啥状态都在那
现在换了高级组件反倒啥都得自己来了。。

[XiaoxiaoPu]

keep-alive

[ss098]

可以直接在客户端使用 localStorage 作为缓存，给你一个 Demo ：

https://github.com/ss098/blog

[Eoss]

@murmur 我并没有用到 vuex ， vue-router 确实可以保存滚动条的状态。但是我现在的情况是，后退就要重新加载数据。不管用的浏览器后退还是 vue-router 的 go(-1)。


@ferrum 你意思是说，是不是如果我在后退的时候不发送 ajax 请求，那么后退后就能够显示上一个状态吗？


@XiaoxiaoPu keep-alive 不是只对拥有 v-bind:is 属性的组件才有效？我是用 vue-router 切换视图的，每个视图里引入若干组件。只有一个 route view 。


@ss098 看了下，发现你博客后退的时候，依然是进行了请求。虽然是做了缓存，在断网下后退也能正常显示页面。但是还不清楚能不能达到我的要求。还要实际下。

感谢各位。我想我更细说下我的需求或许更好。

我这边是做一个商品的搜索。然后有一个“搜索结果页面”，列出了很多商品，下拉的话，还会加载更多。然后点击商品会进入“商品详情页面”。
现状是，从“商品详情页面”后退到“搜索结果页面”时候，“搜索结果页面”的数据是空的，并且会重新执行搜索方法请求数据。就像是刚刚进来“搜索结果页面”一个样子。以致于我都不知道我浏览到了哪一个商品了。

我希望的结果是，后退的时候，“搜索结果页面”依然是上一次的状态。这样我就知道我浏览到了哪里。以及可以继续浏览后面的内容。

[ferrum]

@Eoss 你可以试一下啊，我感觉是这样的，至少用 vue-router 管理路由应该是这样的，因为点击其他链接的时候，页面并没有刷新。

如果没用 vuex ，就用个绑定在 window 对象上的全局变量作为 flag ，试试就知道。

[XiaoxiaoPu]

@Eoss 在 route-view 外面包上 keep-alive 就行了

[Eoss]

@ferrum
@XiaoxiaoPu

感谢。会都尝试一下。明天还要上班呢，大家都早睡。先道声，晚安。

[ihuguowei]

本地存储 localstorage

[1340641314]

楼主可以参考下我的： https://github.com/lzxb/vue-cnode/tree/master/src/lib/route-data
自己创建了一个模块，来保存对应 url 的数据