vue刷新当前路由 router-view中的内容（pc端+手机端）

版权声明： https://blog.csdn.net/xiasohuai/article/details/83412222

通过改变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>