V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Eoss
V2EX  ›  问与答

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

  •  
  •   Eoss · 2017-01-08 18:48:42 +08:00 · 28889 次点击
    这是一个创建于 2673 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    第 1 条附言  ·  2017-01-08 22:20:20 +08:00
    感谢各位。我想我更细说下我的需求或许更好。

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

    我希望的结果是,后退的时候,“搜索结果页面”依然是上一次的状态。这样我就知道我浏览到了哪里。以及可以继续浏览后面的内容。
    第 2 条附言  ·  2017-01-08 22:27:59 +08:00
    不知道各位有没用过移动 web 版的微博,不是 app 。

    在首页点击某条微博查看内容后,后退后,首页依然是上一次的状态。我要的效果就是这样。

    但是在热门微博页面,后退后却要重新加载数据,这是我现在的效果。

    不清楚它是怎么做的。请问 vue2 应该怎么去实现?真的是要自己写缓存?不能用 vue-router 实现?
    11 条回复    2017-01-09 08:49:19 +08:00
    murmur
        1
    murmur  
       2017-01-08 18:52:57 +08:00   ❤️ 1
    vux 是这样设计的,(因为我没用过 redux ,也是刚开始用的,下面理解可能错),他在最主那个 component 监听了路由的变化,如果有新的视图加进去,就给这个视图编一个比当前视图更大的值,这样比如 3->4 就是新开,需要加载数据,如果是 4->3 就是后退,用原来数据渲染就可以了

    不过这个设计有个麻烦之处就是一次因为只有一个 route view ,连滚动条的状态你都要保存到 state 里,否则后退就不真实了
    ferrum
        2
    ferrum  
       2017-01-08 19:00:19 +08:00 via iPhone   ❤️ 1
    现在这种点击链接就加载是一般 app 的正常情况,这样能保证页面上显示的都是最新数据。

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

    但这样会让复杂度增加,你还需要考虑,哪些情况下,是一定要重新加载的。
    murmur
        3
    murmur  
       2017-01-08 19:19:48 +08:00
    更正一点,貌似 vue-router 可以保存滚动条状态
    另外我感觉好奇的是,以前自己做路由,放一堆 div 在那扔着,新的 div 就要加载数据,后退就一个 display 的事啥状态都在那
    现在换了高级组件反倒啥都得自己来了。。
    XiaoxiaoPu
        4
    XiaoxiaoPu  
       2017-01-08 19:25:43 +08:00   ❤️ 1
    keep-alive
    ss098
        5
    ss098  
       2017-01-08 20:39:38 +08:00 via Android   ❤️ 1
    可以直接在客户端使用 localStorage 作为缓存,给你一个 Demo :

    https://github.com/ss098/blog
    Eoss
        6
    Eoss  
    OP
       2017-01-08 22:20:04 +08:00
    @murmur 我并没有用到 vuex , vue-router 确实可以保存滚动条的状态。但是我现在的情况是,后退就要重新加载数据。不管用的浏览器后退还是 vue-router 的 go(-1)。


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


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


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

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

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

    我希望的结果是,后退的时候,“搜索结果页面”依然是上一次的状态。这样我就知道我浏览到了哪里。以及可以继续浏览后面的内容。
    ferrum
        7
    ferrum  
       2017-01-08 22:38:54 +08:00 via iPhone
    @Eoss 你可以试一下啊,我感觉是这样的,至少用 vue-router 管理路由应该是这样的,因为点击其他链接的时候,页面并没有刷新。

    如果没用 vuex ,就用个绑定在 window 对象上的全局变量作为 flag ,试试就知道。
    XiaoxiaoPu
        8
    XiaoxiaoPu  
       2017-01-08 22:45:33 +08:00
    @Eoss 在 route-view 外面包上 keep-alive 就行了
    Eoss
        9
    Eoss  
    OP
       2017-01-08 23:38:44 +08:00
    @ferrum
    @XiaoxiaoPu

    感谢。会都尝试一下。明天还要上班呢,大家都早睡。先道声,晚安。
    ihuguowei
        10
    ihuguowei  
       2017-01-09 04:45:21 +08:00
    本地存储 localstorage
    1340641314
        11
    1340641314  
       2017-01-09 08:49:19 +08:00
    楼主可以参考下我的: https://github.com/lzxb/vue-cnode/tree/master/src/lib/route-data
    自己创建了一个模块,来保存对应 url 的数据
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2479 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 12:21 · PVG 20:21 · LAX 05:21 · JFK 08:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.