现在网站用什么语言做最好,深圳服务好的网站建设,仿站下载工具,在线图片编辑工具我们经常遇到此种情形#xff0c;当新增编辑完成后#xff0c;需要重新刷新页面数据#xff0c;重新调用接口较多时#xff0c;挨个调用过于繁琐#xff1b;甚至可能遇到跨组件调用的问题#xff0c;毫无疑问#xff0c;处理起来有些许费力#xff0c;本文就将如何处理… 我们经常遇到此种情形当新增编辑完成后需要重新刷新页面数据重新调用接口较多时挨个调用过于繁琐甚至可能遇到跨组件调用的问题毫无疑问处理起来有些许费力本文就将如何处理这种情况可用方案进行总结 方案一整页刷新–不推荐
实现
location.reload()
this.$router.go(0) 优点 1.代码简单仅需一行代码即可实现效果 2.便于理解相当于重新加载一遍系统 缺点 相当于按ctrlF5 强制刷新整个页面将重新加载故而加载速度慢会出现一个瞬间的空白页面体验感不好。 方案二路由跳转当前页面–不推荐
实现
1.当前页面增加页面跳转
this.$router.replace({path: this.$route.path,query: {routeKey: new Date().getTime()}
})2.监听当前页面路由变化
watch: {$route(newVal) {if(newVal.query.routeKey) {// 调用需变更的方法}}
}优点 代码简单 缺点 1.地址栏会变化多增加参数 2.只适用于第二种情况跨组件 3.代码不可重复性利用 方案三路由跳转–比较推荐
实现
1.当前页面增加页面跳转
this.$router.replace({path: /centerPage,query: {to:this.$route.path}
})2.增加中间页面
templatediv classcenterPage/div
/templatescript
export default {name: centerPage,methods: {jump() {let url this.$route.query.tothis.$router.replace(url)}},created() {this.jump()}
}
/script优点 1.不会像方案一样有长时间的白屏 2.多个需求需要时可重复使用 缺点 可以在地址栏看到路由切换的过程 方案四provide / inject组合–最为推荐 provide/inject 是 Vue 在 2.2.0 版本新增的 API provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法而在任何后代组件中我们都可以使用 inject 来接收 provide 提供的数据或方法。 实现
1.修改app.vue
templatediv idapprouter-view v-ifisRouterAlive//div
/templatescript
export default {name: App,components: {},data() {return{isRouterAlive: true // 控制页面显隐}},provide() {return{reload: this.reload}},methods: {reload(){this.isRouterAlive falsethis.$nextTick(() {this.isRouterAlive true})}}
}
/script2.当前页面调用
templatediv classcurrentPage/div
/templatescript
export default {name: currentPage,inject: [reload], // 引用methods: {submit() {this.reload() // 调用}}
}
/script优点 1.不会像方案一样有长时间的白屏三个方案中渲染速度最快 2.多个需求需要时可重复使用 3.不会在地址栏看到路由切换的过程
