zoukankan      html  css  js  c++  java
  • vue单页面,多路由,前进刷新,后退不刷新

    最近终于忙里抽空,总结项目经验了

    index页面包含三个链接导航。page1-->page2-->page3.依次前进,每次前进到一个新页面都需要获取数据,而按下后退键后,从page3返回到page2,page2不再获取新数据,而是使用之前缓存的数据。从page2返回到page1时,page1不再获取新数据,而是使用之前的数据。所以,page1和page2需要缓存,page3不需要缓存。可以把page1想象成首页,page2想象成详情页,page3想象成订单提交页。这样方便理解。

    vue.app页面

    钩子函数的执行顺序

    不使用keep-alive
    beforeRouteEnter --> created --> mounted --> destroyed

    使用keep-alive
    beforeRouteEnter --> created --> mounted --> activated --> deactivated
    再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行

    每次进入页面,我们都需要知晓是从哪个页面进来的,用以判断是否需要获取数据。以这个page1页面为例,当我们知晓是从page2过来的,我们就可以认为是用户操作了返回键,这时page1页面就不需要再获取新数据了,使用之前缓存的数据就可以了。如果是从别的页面过来的,我们就需要获取数据。

    我们可以通过beforeRouteEnter这个钩子函数中的from参数判断是从哪个页面过来的,这个参数执行时,组件实例还没创建,所有不能在data中定义变量。我们可以在路由中定义一个变量,用来判断

    beforeRouteEnter中判断是从哪个页面过来的

    判断是从哪个路由过来的,如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可

    activated中执行getData这个获取数据的方法

    因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法,再次进入就不执行了。而activated每次进入都执行,所以在这个钩子函数中获取数据。

    第一次进入page1,能获取新数据,从page2返回时,不再获取新数据了,而是使用之前缓存的数据。但这样还有一个问题,当用户从page1进入page2后,因为某种原因,手动刷新了page2的页面。这时再返回到page1,发现之前缓存的数据丢失了,而且也没有再重新获取。所以我们还需要再添加一个判断条件,当用户手动刷新页面后,再返回时就需要重新获取数据了。

    如何添加这个条件,判断用户是否刷新了页面呢?我们知道,当使用keep-alive后,只有第一次进入后会触发created钩子函数,再次进入就不再执行了。当用户刷新了页面,这个钩子函数就会又执行,所以,我们可以利用这个小技巧来做点文章。

    data中定义变量isFirstEnter用来判断是否第一次进入,或是否刷新了页面,默认false

     

  • 相关阅读:
    PHP中多维数组var_dump展示不全
    postman 请求接口 Could not get any response
    TP5中用redis缓存
    前端控制台 JavaScript函数报错 SyntaxError: expected expression, got ';' SyntaxError: expected expression, got 'if'
    jQuery 虚拟数字键盘代码
    判断当前点击的是第几个标签 例如 <li></li> 、<option></option>
    layui checkbox , radio 清除所有选中项
    layui select 联动渲染赋值不了数据的问题
    TP5 isEmpty() 判空方法 所用场景
    排序(插入排序、折半插入排序、希尔排序、冒泡排序、快速排序、简单选择排序、堆排、归并排序、基数排序)
  • 原文地址:https://www.cnblogs.com/supershare/p/14768629.html
Copyright © 2011-2022 走看看