vue中后退操作如何刷新页面

青衣剑客
  • 26

a页面是个list列表页面,点击列表页面某条信息进行修改跳转到的修改页面b,修改完成后b页面中使用this.$router.push('a'),返回到a页面后 发现该条信息并没有变化,这种情况下如何实现修改完成后的数据在列表页可见?

回复
阅读 17.6k
10 个回答

开启keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。把列表页获取数据的接口请求由放在mounted里改为放在activated即可。

有两种解决办法:

  1. 如果你的列表页是从接口获取的数据,那么返回列表页后,会再次请求接口,就可以解决。
  2. 由于两个页面是不同的组件,每个组件的状态(数据)是相互独立的,所以,把你要的列表页数据,放到 vuex 中,你在 b 页面修改数据,就提交修改 vuex ,这样数据就互通了。

A: 在页面b修改数据后同步到服务端,返回页面a后重新请求数据

B: 页面a的list数据同步到全局作用域/localStorage,跳转到后页面b直接修改对应的全局对象/localStorage, 回到页面a后list数据从之前的全局对象/localStorage获取

你是不是加了keep-alive, 如果是的话,可以写过滤,把这个路由过滤掉。或者在路由转换之前,写一个判断

应该是你这个路由加了keep-alive,把这个router的keep-alive给false掉就可以每次进去会刷新

看后面那么多关于keep-alive的评论你都没理,估摸着跟这个没关系。按常理来讲是不会出现这个问题的,建议你贴源码。还要提个建议,返回建议使用this.$router.back()或者this.$router.go(-1)。否则你页面后退的时候会很尴尬

题主解决了吗?
我是通过在路由中meta属性中添加keepalive:false,达到了我想要的效果:返回时重新调用接口,刷新pay页面数据。
不知道和你说的情况是不是一致的,用的vue-cli3。路由router.js中部分代码如下:

  {
    path: '/pay/:aid/:pid',
    component: () => import ('./views/Pay.vue'),
    meta:{
        keepalive:false
    }
  }

这些其实都解决不了,真正能解决的是 跳到其它页面,再跳到目标页面(这一步用户手动)

上面赞数最多的青衣剑客所说确实是一种好方法,但有一种情况可能不适用:返回的页面是当前页面的父组件(嵌套路由),这个时候有两种方法可以解决:

  1. 使用watch监听route路由对象,操作数据更新
  2. 使用beforeRouteUpdate导航守卫,监听路由更新,然后操作路由更新

      beforeRouteUpdate(to, from, next) {
     next()
     // 获取路由名,判断是否是父组件,以免重复刷新数据
     if (this.$route.name === 'CardContent') {
       getFieldList(this)
     }
      }

b页面是否提交修改,如果已提交,按理说返回a页面后重新请求数据肯定是变化了的,除非你keep-alive缓存了

你知道吗?

宣传栏