Vue2刷新当前页面，并重新加载数据

您所在的位置：网站首页 › vue页面不刷新加载数据 › Vue2刷新当前页面，并重新加载数据

Vue2刷新当前页面，并重新加载数据

2024-03-10 08:59| 来源: 网络整理| 查看: 265

实现原理：

1、移除目标页面（当前页面）

2、重新渲染目标页面

代码实现：

在vue2中，我们需要用到provide和inject这对方法（它们总是成对出现的），这对方法可以让我们跨多层级进行通信。也可查看vue2跨组件通信。

App.vue export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return{ showRouterView:true } }, methods: { reload (){ // 改变this.showRouterView的状态，控制路由出口的显示隐藏 this.showRouterView = false this.$nextTick(()=>{ // 必须使用nextTick，否则最新dom可能未更新，导致刷新失败 this.showRouterView = true }) } } }

使用provide提供的方法或属性，可以在任意子孙级组件中通过inject获取。

某子孙组件 export default { inject:['reload'], data(){ return {} }, methods:{ change(){ // 页面逻辑执行完毕后调用reload方法 this.reload(); } } }

使用inject注入的方法，相当于methods中的方法，可以直接使用。

【本文地址】

Vue2刷新当前页面，并重新加载数据

Vue2刷新当前页面，并重新加载数据

今日新闻

推荐新闻