<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            vue.js刷新當前頁面的實例講解

             更新時間:2020年12月29日 15:15:25   作者:小妮淺淺  
            在本篇文章里小編給各位分享了一篇關于vue.js刷新當前頁面的實例講解,有興趣的朋友們可以學習參考下。

            在我們修改過頁面的某些數據后,通過想要把頁面刷新一下,看看修改后的結果。由于vue的存在,頁面是不會自動刷新的,需要我們手動進行操作。在vue里有三種刷新方法,最推薦的就是組合控制法,另外另種方法也會分享給大家學習,下面我們一起來看看vue如何刷新頁面吧。

            1.強制刷新

            window.location.reload()

            原生 js 提供的方法;

            this.$router.go(0),vue 路由里面的一種方法;

            這兩種方法都可以達到頁面刷新的目的,簡單粗暴,但是用戶體驗不好,相當于按 F5 刷新頁面,頁面的重新載入,會有短暫的白屏。

            2.偽造刷新

            通過路由跳轉的方法刷新,具體思路是點擊按鈕跳轉一個空白頁,然后再馬上跳回來

            // index.vue 首頁
            this.$router.replace('/empty')
            // empty.vue 空白頁
            created() {
              this.$router.replace('/')
            }

            3.使用provide / inject組合控制的顯示

            vue官方說明中允許一個祖先組件通過設置provide/inject向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關系成立的時間里始終生效。provide/inject 是解決組件之間的通信問題的利器,不受層級結構的限制。

            在項目中修改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>

            注入依賴:

            export default {
             inject:['reload'], //注入依賴
             name: "CompanyConfigure",
             data() {
              return {... ...

            調用:

            this.reload();

            到此這篇關于vue.js刷新當前頁面的實例講解的文章就介紹到這了,更多相關vue.js刷新當前頁面內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

            相關文章

            • Python3 xml.etree.ElementTree支持的XPath語法詳解

              Python3 xml.etree.ElementTree支持的XPath語法詳解

              這篇文章主要介紹了Python3 xml.etree.ElementTree支持的XPath語法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
              2020-03-03
            • django xadmin中form_layout添加字段顯示方式

              django xadmin中form_layout添加字段顯示方式

              這篇文章主要介紹了django xadmin中form_layout添加字段顯示方式,具有很好的 參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
              2020-03-03
            • Python使用urllib2模塊實現斷點續傳下載的方法

              Python使用urllib2模塊實現斷點續傳下載的方法

              這篇文章主要介紹了Python使用urllib2模塊實現斷點續傳下載的方法,實例分析了urllib2模塊的使用及斷點續傳下載的實現技巧,需要的朋友可以參考下
              2015-06-06
            • Python中作用域的深入講解

              Python中作用域的深入講解

              這篇文章主要給大家介紹了關于Python中作用域的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
              2018-12-12
            • Python enumerate內置庫用法解析

              Python enumerate內置庫用法解析

              這篇文章主要介紹了Python enumerate內置庫用法解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
              2020-02-02
            • Python程序暫停的正常處理方法

              Python程序暫停的正常處理方法

              這篇文章主要介紹了Python程序暫停的實現代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
              2019-11-11
            • python模塊導入的細節詳解

              python模塊導入的細節詳解

              這篇文章主要給大家介紹了關于python模塊導入細節的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
              2018-12-12
            • Python中正則表達式的用法總結

              Python中正則表達式的用法總結

              今天小編就為大家分享一篇關于Python中正則表達式的用法總結,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
              2019-02-02
            • pygame庫實現俄羅斯方塊小游戲

              pygame庫實現俄羅斯方塊小游戲

              這篇文章主要為大家詳細介紹了pygame庫實現俄羅斯方塊小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
              2019-10-10
            • python模擬enum枚舉類型的方法小結

              python模擬enum枚舉類型的方法小結

              這篇文章主要介紹了python模擬enum枚舉類型的方法,實例總結了python模擬enum枚舉類型的相關技巧,非常具有實用價值,需要的朋友可以參考下
              2015-04-04

            最新評論

            hao500彩票 www.data-track.com:秦皇岛市| www.fjmejd.com:大足县| www.reewallpapers.com:全南县| www.ljseducation.com:龙江县| www.duchang999.com:晋江市| www.evbpower.com:商城县| www.nation-wide-building.com:繁昌县| www.szbaled.com:白银市| www.mingyunjiaoxiangqu.com:上虞市| www.hobigoods.com:迁西县| www.sonstudios.org:泾阳县| www.frizerski-salon.net:曲靖市| www.yourlifebar.com:辽源市| www.thewinconcept.com:凯里市| www.gq992.com:佛坪县| www.primpandwear.com:铜陵市| www.beautysalonsolutions.com:乌鲁木齐市| www.dreclements.com:温州市| www.jvbkv.cn:阜城县| www.china-3f.com:离岛区| www.majohairbraiding.com:沈阳市| www.hg50345.com:乌兰浩特市| www.smartwhitesmile.com:铜鼓县| www.70088g.com:台北县| www.jordantrainerprime.com:潞西市| www.globalnj.com:青海省| www.adonis-danieletto.com:治多县| www.0757xj.com:南昌市| www.lzmlh.com:博白县| www.judaicaboutique.com:肇源县| www.micheray.com:县级市| www.zcfpw.cn:塔河县| www.jydproducts.com:安远县| www.shreesuryawood.com:北海市| www.offerhand.com:乌恰县| www.taxi053.com:射阳县| www.zamack.com:漠河县| www.zxqmw.cn:连江县| www.beautyinimperfections.com:彭水| www.soft-file.org:新民市| www.z5838.com:长海县| www.mfqnc.com:花莲市| www.mrtentllc.com:正宁县| www.3iiiii.com:揭阳市| www.rr36365.com:荣成市| www.shaltiv.com:美姑县| www.dhdtw.com:陈巴尔虎旗| www.bloggerjomblo.com:晋城| www.pikaglass.com:宜宾市| www.chaletdemontagne.org:万州区| www.the-kish.com:平遥县| www.davidroemerphotography.com:科尔| www.lovejaniethien.com:德兴市| www.simgiaihan.com:安国市| www.bjyxyrw.com:辉县市| www.tl0553.com:万源市| www.cngsc.com:陇川县| www.szhsmh.com:德令哈市| www.xmtwzh.com:陵水| www.ks-diaz.com:宁河县| www.consumsostenible.com:资溪县| www.paulovarelahairspace.com:常德市| www.cccmlogistics.com:峨眉山市| www.manganetabarespoiler.com:宕昌县| www.bildungerziehung.org:裕民县| www.brosway-gioielli-it.com:长岛县| www.jordantrainerprime.com:江孜县| www.puzzle-tours.com:宝山区| www.trsnspls.com:新余市| www.1dcode.com:迭部县| www.tj-mro.com:方正县| www.xemhwyn.com:德庆县| www.z9862.com:聂拉木县| www.conceptpromotions.net:伊宁市| www.dickalerts.com:天祝| www.jljxg.cn:阜平县| www.5i3b.com:保靖县| www.club-editeur-web.com:改则县| www.champaignilmls.com:阜新| www.zxqmw.cn:巧家县| www.alexandralipkova.com:阿鲁科尔沁旗| www.warcraftink.com:禹州市| www.uae-abandoned.com:沐川县| www.zezenetwork.com:汤阴县|