問題描述

• 今天在做畢業(yè)設(shè)計時候遇到一個問題， 當在搜索框重復搜索時，下面顯示的搜索結(jié)果必須要手動刷新后才可以更新， 想實現(xiàn)的效果是，點擊搜索后最新的頁面自動渲染。

問題解決

方法一

location.reload()

• 缺點： 頁面閃爍，可以看到空白頁

方法二

this.$router.go(0)

• 缺點用上

方法三

數(shù)據(jù)更新以后， 先跳轉(zhuǎn)到假路由，再重新跳轉(zhuǎn)回頁面

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>

在需要刷新的頁面添加， 在操作完成后（ 比如刪除，更新， 增加），調(diào)用this.reload()

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