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語法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03django xadmin中form_layout添加字段顯示方式
這篇文章主要介紹了django xadmin中form_layout添加字段顯示方式,具有很好的 參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
最新評論