<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. 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

      最新評論

      218彩票 www.djtamotsu.com:闽清县| www.piranhacrunch.com:宜君县| www.gbdbn.cn:鄂温| www.abbottslandscape.com:松潘县| www.wh-leadlaser.com:磴口县| www.39daiyun.com:五峰| www.notokfittings.com:灵台县| www.moneykoo.com:延安市| www.pj88853.com:永福县| www.baby-photos.net:汨罗市| www.shuneiyi.com:嘉鱼县| www.jiaxinleather.com:盐亭县| www.la-chapelle.net:石城县| www.yxjmei.com:贵德县| www.binggankong.com:建瓯市| www.natural-cuba.com:奎屯市| www.932361.com:安丘市| www.catalinamotoroiu.com:手机| www.lnujy.com:沂水县| www.mobilespiele.org:会泽县| www.kyxjw.cn:习水县| www.lamaihotelpatong.net:新巴尔虎右旗| www.htjfbjlaw.com:横峰县| www.fitgungym.com:七台河市| www.3883pj.com:闻喜县| www.quit-list.com:宜黄县| www.lcompuserve.com:定兴县| www.ks-diaz.com:天峻县| www.dollardement.com:枣庄市| www.chinatiecheng.com:句容市| www.mypopularbrand.com:独山县| www.alarmsunrise.com:获嘉县| www.charlescountytoday.com:彰化市| www.5677k.com:阿鲁科尔沁旗| www.satext.com:丹巴县| www.pathsofbeauty.org:木里| www.adjian.com:洛南县| www.itao321.com:塘沽区| www.noticiasecuador.org:龙南县| www.lx9188.com:正蓝旗| www.xhjsw.cn:盘山县| www.shaileshsinha.com:罗甸县| www.massage-prague.net:华蓥市| www.mjknetworks.com:偏关县| www.ganzaojijs.com:栖霞市| www.hw8168.com:汤原县| www.ds1980.com:房山区| www.ycmhw.com:乌拉特中旗| www.jiaanhb.com:靖安县| www.jdlzy.com:宁河县| www.ps3usbjailbreak.com:宜川县| www.xvideogaytube.com:裕民县| www.mai0565.com:武义县| www.ddhsyl.com:郑州市| www.zhida2000.com:旺苍县| www.lzmlh.com:沙湾县| www.accentata.com:青阳县| www.stmgqhw.com:香港| www.jackherbflorist.com:垦利县| www.xnxqw.cn:济阳县| www.lsjomd.com:石林| www.barnfrog.com:民勤县| www.wdxshop.com:额尔古纳市| www.yjkj1588.com:广丰县| www.b495.com:临沭县| www.142126.com:阜宁县| www.stephanmueller.net:金山区| www.backinbody.com:三江| www.kzftp.com:襄樊市| www.dapinlv.com:谷城县| www.21cloudnet.com:宿迁市| www.headsickpinups.com:开远市| www.dupse.com:江都市| www.lmpzw.cn:株洲市| www.dx557.com:湾仔区| www.hairbook.org:盱眙县| www.ukbmw.com:九台市| www.z9698.com:宁乡县| www.insect-museum.com:乐至县| www.guitar-building.com:峨山| www.chengyuzs.com:吐鲁番市| www.mikenatalizio.com:伊吾县| www.hg68345.com:方山县| www.pasion4x4rosario.com:西乌珠穆沁旗|