<tt id="eol1w"></tt>
  • 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

    最新評論

    盈利国际彩票 www.z5838.com:邹城市| www.cufeedulx.com:长沙县| www.autocar-dax.com:德清县| www.rolfjoneslaw.com:博湖县| www.xingkai688.com:永德县| www.teknikellermakina.com:林口县| www.destryband.com:枣强县| www.hg67456.com:新竹市| www.carandpetspa.com:海丰县| www.fb662.com:柞水县| www.supernakliye.com:枣庄市| www.g3887.com:珠海市| www.takwed.com:聂拉木县| www.hg59789.com:海盐县| www.apofraxeis-athina.com:河源市| www.hzqbsjz.com:富民县| www.agence-merevimmo.com:平湖市| www.b-ads.com:新津县| www.aumetrodeslilas.com:巧家县| www.920suncity.com:轮台县| www.torrezanefelipe.com:游戏| www.948066.com:城口县| www.choco-loco-net.com:赤壁市| www.zn355.com:沧州市| www.n9bx.com:望谟县| www.whatschimp.com:镇赉县| www.whobuysthesethings.com:巴里| www.jnquanjing.com:六安市| www.in2demo.com:中卫市| www.tianluzaojia.com:高要市| www.besttech-jy.com:额尔古纳市| www.rotaryclubstpete.com:鹰潭市| www.troninvestlimited.com:合水县| www.dchsci.com:晋城| www.0898sport.com:宜城市| www.dsl-miami.com:德阳市| www.ladypaservices.com:汕头市| www.nigerianminers.org:克拉玛依市| www.0937xt.com:涡阳县| www.zainvista.com:辉县市| www.wh-leadlaser.com:靖远县| www.nillinternational.com:金寨县| www.jacobswelldrilling.net:沂南县| www.bwpha.com:集贤县| www.km-alliance.com:进贤县| www.tynale.com:淮南市| www.chengbag.com:普兰店市| www.cp2260.com:连山| www.safelightstore.com:于田县| www.sap-rope.com:南昌市| www.n048.com:沐川县| www.simgiaihan.com:无棣县| www.yzabtattoo.com:正宁县| www.hg18456.com:新巴尔虎左旗| www.cp6779.com:新和县| www.chen0370.com:任丘市| www.kashoubangzongdai.com:湖口县| www.qxnxf.com:青浦区| www.acadiespatiale.com:那坡县| www.live2save2live.com:略阳县| www.bunnykitten.com:临夏县| www.zxjianfei.com:定日县| www.air-max-run.com:额敏县| www.544680.com:聂拉木县| www.valentinesday-poems.com:台南县| www.soccer-cleats-usa.com:屏东县| www.aaagascalculator.com:定安县| www.hjdbw.cn:泌阳县| www.jingegou.com:榆社县| www.christianvoices.net:密云县| www.duhocnamhai.com:安塞县| www.mf-moto.com:崇阳县| www.guoshiyan.com:宜兰市| www.albatrosrugbyclub.com:龙南县| www.xnguopin.com:平原县| www.nz337.com:博白县| www.escenamobile.com:卓尼县| www.xczc1.com:富平县| www.tabletite.com:庆阳市| www.idcommusa.com:焉耆| www.bloghomedepot.com:乐昌市| www.tvoy24.com:龙泉市| www.fz559.com:龙口市| www.thailand-china.com:长兴县|