问题描述

• 今天在做毕业设计时候遇到一个问题， 当在搜索框重复搜索时，下面显示的搜索结果必须要手动刷新后才可以更新， 想实现的效果是，点击搜索后最新的页面自动渲染。

问题解决

方法一

location.reload()

• 缺点： 页面闪烁，可以看到空白页

方法二

this.$router.go(0)

• 缺点用上

方法三

数据更新以后， 先跳转到假路由，再重新跳转回页面

let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
this.$router.push(NewPage);
this.$router.go(-1);

方法四

-provide/ inject 方法
-在App.vue里声明reload方法, v-if 来控制 router-view 的显示或隐藏来控制页面的再次加载

// app.vue 里添加
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

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

在需要刷新的页面添加， 在操作完成后（ 比如删除，更新， 增加），调用this.reload()

export default {
   inject: ['reload']
...
   this.reload()
}