通过改变router-view中的key来达到刷新组件的目的。
界面上有个刷新按钮,点击刷新的时候,执行函数,改变activeDate的值,为当前的时间戳。这样就会刷新router-view中的内容。
<span title="刷新" @click="refresh"></span>
<router-view :key="activeDate"/>
data() {
return {
activeDate: 1
}
},
methods: {
refresh() {
this.activeDate = new Date().getTime()
}
}
手机端mint-ui案例:
<template>
<div id="home">
<top class="header"></top>
<article><!--底部路由页面-->
<spm-loadmore :top-method="loadTop" ref="loadmore">
<router-view :key="activeDate" />
</spm-loadmore>
</article>
<bottom class="footer"></bottom>
</div>
</template>
<script>
import Vue from 'vue';
import { Loadmore } from 'mint-ui';
import bottom from '@/components/bottom/Bottom.vue'
import top from '@/components/top/Top.vue'
Vue.component("spm-loadmore", Loadmore);
export default {
name: 'home',
data() {
return {
activeDate: 1
}
},
components: { bottom, top },
methods: {
//下拉刷新页面
loadTop() {
this.activeDate = new Date().getTime()
this.$refs.loadmore.onTopLoaded();
},
},
mounted() {}
}
</script>