<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.wuxihuahao.com:佛坪县| www.021yhj.com:长阳| www.fuzhuang1717.com:西贡区| www.mixbrand.net:墨竹工卡县| www.altbremerton.com:柘城县| www.cv62.com:诸城市| www.sun-automation.com:晋城| www.gondex.com:临沧市| www.xafkyy120.com:桂阳县| www.beautifulhealthyliving.com:江安县| www.azulrestaurante.com:古浪县| www.giatlv.com:六枝特区| www.gregoryaring.com:华宁县| www.b-noy.com:铜山县| www.qxtongbeng.com:柳江县| www.manganetabarespoiler.com:西盟| www.corprussia.com:大田县| www.firmarehberisitesi.com:广安市| www.nzlvisa.com:苍梧县| www.adarkersideofme.com:永靖县| www.tekirotools.com:旬阳县| www.farukfunclub.com:改则县| www.gumur.com:肥城市| www.iforoz.com:依兰县| www.jordanegasc.com:布尔津县| www.ptcdw.cn:霍邱县| www.tagged-login.com:维西| www.jl095.com:揭东县| www.dg-dacheng.com:彭泽县| www.pengdaclothing.com:永顺县| www.zhukao001.com:浑源县| www.feel-fi.com:长岛县| www.amysplaceforyouth.org:清徐县| www.bjrichhome.com:古丈县| www.010wg.com:栾城县| www.azulrestaurante.com:永安市| www.microsatsymp.com:花垣县| www.99chunyin.com:达尔| www.eprsdxx.com:大同市| www.hobigoods.com:达拉特旗| www.debian-mirror.com:岱山县| www.comfymassagetable.com:新干县| www.hg20345.com:嘉荫县| www.njkaigao.com:曲阜市| www.poengun.com:抚顺县| www.bentleybeacher.com:乐亭县| www.debian-mirror.com:富民县| www.relishculinaryschool.com:惠来县| www.dessertsbyrondi.com:宁德市| www.lcompuserve.com:沛县| www.classes2go.com:青神县| www.351873.com:外汇| www.0937xt.com:洛宁县| www.n6768.com:永昌县| www.ktv198.com:邮箱| www.webz-international.com:正蓝旗| www.jnr3.com:濮阳县| www.baike-zhidao-baidu.com:深泽县| www.showbar8.com:辽中县| www.fuzhuang1717.com:瑞昌市| www.fmars2007.org:淮安市| www.businessptr.com:长乐市| www.specialdayvideo.com:福安市| www.bichengdecoration.com:日照市| www.monterockcorp.com:利津县| www.czzhanhai.com:湖口县| www.v8f4.com:稷山县| www.breakfastbrampton.com:巴林左旗| www.aloeveramedicine.com:康保县| www.colangelosbakery.com:西乌| www.mf-moto.com:井研县| www.v7h6.com:肇东市| www.stirling-residences-home.com:肥西县| www.autocar-dax.com:米泉市| www.kocblog.com:正阳县| www.cp3115.com:民勤县| www.discover-trinity.org:温州市| www.zhjuzi.com:明光市| www.hg32789.com:福海县| www.sanwencaipiao.com:宝山区| www.wynlyn.com:葫芦岛市| www.accountingspecialist.net:巩义市| www.zhanxun56.com:乌拉特后旗| www.brandshoesbar.com:桐乡市|