vue中怎麼實現頁面刷新?以下這篇文章為大家介紹一下在vue中實現全頁刷新和局部刷新的方法,希望對大家有幫助!
1.修改App.vue,程式碼如下:
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </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>
重點如下圖所示:
2.到需要刷新的頁面使用inject 進行導入並引用reload:
3.在需要進行調用的方法中呼叫this.reload() 即可
1.定義一個變數isReloadData,並將該變數綁定到需要刷新的標籤上:
#2.定義局部刷新的方法reloadPart:
3.在需要執行局部刷新的方法中進行呼叫
此時,全頁面刷新或局部刷新就會派上用場,下面截圖舉例本人遇到的第二種情況,已透過使用全頁刷新及局部刷新解決:
1.預設全選,頁面渲染正常:
2.勾選掉一個展示列,頁面渲染正常:
3.把勾選掉的展示列再勾選上,出現空白區域:
#此時,只需要在單選的方法中調用局部刷新的方法this.reloadPart() 即可解決,同理,全選也是如此。
4.當每次新增展示列時,表格也會出現空白區域,此時我們只需要在新增記錄成功後呼叫全頁面刷新的方法 this.reload() 即可。
【相關推薦:《vue.js教學》】
以上是帶你詳解vue中實現全頁或局部刷新的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!