vue项目中数据改变之后刷新页面

时间：2019-12-16 23:16:53 阅读：936 评论：0 收藏：0 [点我收藏+]

页面实时更新的方法：

1.window.onload.reload()

2.this.$route.go(0)

3.推荐使用该方法刷新页面

① <router-view v-if="isRouterAlive"/>

② APP组件中操作：

　　data 中定义变量

　　data () {

return {

isRouterAlive: true

}

　③ methods中定义方法

　　reload() {

this.isRouterAlive = false

this.$nextTick(function () { //在下次dom更新循环结束之后执行延迟回调。数据更新之后立即使用这个方法，获得更新后的dom

this.isRouterAlive = true

})

④ 将该方法provide出去

　　provide () {

return {reload: this.reload}

⑤前面四步就将该方法在app中设置完成，接下来组件中引用该方法

　　export default {

　　inject: [‘reload‘], // 引入页面同步刷新的依赖

　　 methods:{

getMag(){

　　　　　　this.reload() //直接使用该方法

　　　　　　}

总结：前两种方法会出现白屏现象，推荐使用第三种方法

原文：https://www.cnblogs.com/cjechenjinge-0820/p/12051416.html

踩

(0)

评论一句话评论（0）

分享档案

更多>