Vue项目实现页面刷新效果、v-if router-view
发布于 2 个月前 作者 webdashen 492 次浏览 来自 分享

vue项目刷新效果

有时候,我们需要对当前页面进行刷新,让vue重新加载页面,这是一个很常见的页面效果

实现方法 v-if 添加到 router-view

实现方法也很简单,就是在 router-view 中添加 v-if 即可实现刷新效果 注意:不是在app.vue中的 router-view添加哦,而是我们项目的layout组件中的router-view,如果是 app.vue 那么就会出现页面白屏的效果

实现代码

通过状态管理vuex控制变量,通过点击按钮,刷新vuex数据,实现页面刷新

layout.vue

html部分的代码

<transition name="fade-transform" mode="out-in">
		<!-- 在这里添加 v-if 即可  -->
      <keep-alive :include="cachedViews" v-if="manualRefresh">
        <router-view :key="key" />
      </keep-alive>
</transition>

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['manualRefresh']) // 通过状态管理,添加
  },
 

vuex - app.js

控制状态管理的vuex部分的代码

const state = {
  // 页面刷新方法结合
  manualRefresh: true,
  refreshTimer: null
}

const mutations = {
  PAGE_REFRESH: (state, view) => {
    console.log('页面刷新方法执行......')
    state.manualRefresh = false
    state.refreshTimer = setTimeout(() => {
      state.manualRefresh = true
      clearTimeout(state.refreshTimer)
    }, 200)
  }
}

const actions = {
  manualRefresh ({ commit }, view) {
    console.log('页面刷新方法触发......', window.location.href, view)
    commit('PAGE_REFRESH', view)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

vuex - getter.js

getter快捷访问,对应 layout.vue 里面的代码 mapGetters

const getters = {
  manualRefresh: state => state.app.manualRefresh,
}
export default getters

刷新按钮

<template>
  <el-button 
	  type="text" 
	  style="font-size:26px;color:#000 !important;" 
	  size="medium" 
	  class="right-menu-item el-icon-refresh" 
	  @click="handleRefresh">
  </el-button>
</template>

<script>
export default {
	methods: {
	  // 刷新页面
	  handleRefresh () {
		this.$store.dispatch('app/manualRefresh')
	  }
	}
}
</script>



回到顶部