vue-admin-element页面局部刷新

学习文章:https://www.jb51.net/article/233809.htm

App.vue

<template>
  <div id="app">
   <router-view v-if="isShow"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isShow:true
    }
  },
  methods:{
    reload(){
      this.isShow=false;
      this.$nextTick(()=>{
        this.isShow=true
      })
    }
  }
}
</script>

页面刷新

<script>
  import {   pagenum } from '@/utils/public'
  export default {
    name: 'usergroup',
    inject:['reload'],  ***//需要引入***
    data() {
      return {}
    },
    methods: {
    // 点击刷新
      saveInfo: function() {
        var _this = this;
            setTimeout(function(){
            	_this.reload()
            },500)
          }
      },
    },
    created() {
      var _this = this;
      this.$nextTick(function() {
      })
    },
  }
</script>

局部刷新

定义一个变量 isReloadData,并将该变量绑定到需要刷新的标签上 v-if=" isReloadData "
在这里插入图片描述

调用该方法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-element-admin 是一个基于 Vue.jsElement UI 的后台管理系统模板。在 Vue-element-admin 中,页面的刷新可以通过以下几种方式实现: 1. 使用 Vue Router 的 `beforeEach` 钩子函数:在路由切换之前,可以执行一些操作,比如刷新页面。可以在 `router/index.js` 文件中设置如下代码: ```javascript import router from './router' router.beforeEach((to, from, next) => { // 判断是否需要刷新页面 if (to.meta.refresh) { window.location.reload() } else { next() } }) ``` 然后在路由配置文件 `router/modules` 中,对需要刷新的页面进行标记: ```javascript const routes = [ { path: '/dashboard', component: Layout, children: [ { path: 'index', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard', refresh: true } // 设置 refresh 属性为 true } ] } ] ``` 2. 使用 `window.location.reload()` 方法:在需要刷新页面的地方,可以直接调用该方法进行页面刷新。例如,在某个按钮点击事件中: ```javascript methods: { handleRefresh() { window.location.reload() } } ``` 3. 使用 Vuex 进行状态管理:可以在 Vuex 的状态管理中定义一个变量,用来标记是否需要刷新页面。然后在对应的页面组件中监听该变量的变化,当变量为 `true` 时,执行刷新操作。 这些方法都可以实现页面的刷新效果,根据具体的需求选择合适的方式即可。希望对你有帮助!如果有更多问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值