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()每次进入页面都会触发,这样就能到达更新的效果

Logo

前往低代码交流专区

更多推荐