VUE頁面刷新問題

来源:https://www.cnblogs.com/yaotu/archive/2019/01/15/10273010.html
-Advertisement-
Play Games

1). location方式 2). router方式 3). provide/inject方式 App.vue export default { name: 'App', // 提供reload方法 provide: function () { return { reload: this.relo ...


1). location方式
location.reload()

缺點:刷新頁面,卡白
2). router方式
this.$router.go(0)
缺點:同一問題,比一好點
3). provide/inject方式
App.vue
<router-view v-if="isRouterAlive"></router-view>

<script>
  export default {
    name: 'App',
    // 提供reload方法
    provide: function () {
      return {
        reload: this.reload
      }
    },
    // isRouterAlive控制顯示
    data: function () {
      return {
        isRouterAlive: true
      }
    },
    methods: {
      // 刷新方法
      reload: function () {
        this.isRouterAlive = false;
        // 該方法會在dom更新後執行
        this.$nextTick(function () { this.isRouterAlive = true })
      }
    }
  }
</script>


home.vue

<script>
  export default {
    name: 'home',
    // 註入reload, AppVue中註冊
    inject: ['reload'],
    methods: {
      // 退出登陸
      logout: function () {
        // 刷新
        // location.reload()
        // this.$router.go(0)
        // 刷新當前頁面
        this.reload();
      }
    }
  }
</script>

缺點:暫時比較不錯的解決方案,重點控制`router-view`

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、flex flex是flexible box的縮寫,意為“彈性佈局”; 定義彈性佈局 display:flex; 二、基本定義 我只簡單的說一下容器和項目,因為只關係容器和項目來講的(個人理解)。 三、 容器的屬性 有6個屬性 一下對6個容器屬性的簡單介紹 1. flex-direction屬性 ...
  • 前言 node中有一組流api,它們可以像處理網路流一樣處理文件。流api用起來非常方便,本節學習介紹文件處理基礎和流的概念。 目錄 1. 處理文件路徑 處理文件路徑需要用到一個核心模塊(path),path模塊可以規範化、連接、解析路徑,還可以將絕對路徑轉換為相對路徑,提取路徑的組成以及判斷路徑是 ...
  • 學習Vue.js時,Chrome瀏覽器安裝Vue.js devtool能很方便的查看Vue對象、組件、事件等。 本文以Chrome瀏覽器插件Vue.js devtools_3.1.2_0.crx的安裝為例。 步驟: 1、打開Chrome瀏覽器,右上角找到“自定義及控制Google Chrome”圖標 ...
  • 1.JavaScript switch 語句 使用 switch 語句來選擇要執行的多個代碼塊之一。 語法: 工作原理:首先設置表達式 n(通常是一個變數)。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配,則與該 case 關聯的代碼塊會被執行。使用 break 來阻止代碼自動地 ...
  • 如果你不小心給其它盒子設置了z-index屬性顯示在最上層而又沒有將該盒子進行隱藏。 <style> .bottom { position: absolute; width:100px; height:100px; background:pink; cursor:pointer; } .top { ...
  • 彈性盒模型 彈性盒子是css3的一種新佈局模式,由容器(父元素)和項目(子元素)組成。 彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式。 引入彈性盒模型的目的:提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白區間。 設置彈性盒子:disp ...
  • 1. 父傳子 2. 子傳父 3. 兄弟相傳 ...
  • 基本選擇器 1.id選擇器 >根據id來獲取,只有一個。 $( " #id的值 " ) 2.標簽選擇器 >根據標簽的名字獲取,可以有多個。 $( " 標簽的名字 " ) 3.類選擇器 >根據類樣式的名字來獲取,可以有多個。 $( " . 類樣式的名字" ) 複雜選擇器 4.標簽+類樣式選擇器 >$( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...