vue中路由跳转怎样刷新页面保证页面更新

vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义
<card @click.native=“viewMoreRelation(item)” :archive = “item”>
viewMoreRelation(row){
var fileLists=[]
var map={url:row.faceUrl}
fileLists.push(map)
this.$router.push({ path: ‘/dataSelect/facerelations’,
query: {fileList:fileLists,profileID:row.profileID,whenActive:‘first’}});
},

使用$route.push方法,该方法有两个参数path(需要跳转的路由地址)和query(需要传递的参数)

在目标页面使用this.$route.query.fileList来接收各个参数用于赋值
这时候有一个问题,第一次跳转过去是正确的参数和created里初始加载的查询参数,可是不关闭当前页面,再次返回前一个页面,切换另外一条数据进行跳转到这个页面时发现新参数没有更新,查询结果也没有更新?

这是由于我们用了vue框架里
< keep-alive :include=“cachedViews”>
< router-view :key=“key” />
< /keep-alive>
即切换菜单时保留上次查询结果。
这样再次打开created方法里的方法不会再次触发,这时需要用到
activated(){
}
来把调转页面的参数和需要触发的函数写进去
在这里插入图片描述
这样就可以保证每次跳转到目标页面都能能被更新触发

这里补充下原因
created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;
activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

所以页面跳转再我们不关闭页面,即没有销毁的情况下created()不会再次触发,而activated()每次进入页面都会触发,这样就能到达更新的效果

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值