通過改變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>