Vue 刷新當前路由的實現(xiàn)代碼
更新時間：2019年09月26日 08:21:23 作者：waterCloud
這篇文章主要介紹了Vue 刷新當前路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
開發(fā)項目的時候突然接到了這個需求，實驗過后，解決方法也蠻多種，下面就講下常規(guī)的幾種方案
1.改變router-view中的key值
通過改變 router-view 中的 key 值，來達到刷新組件的目的
<router-view :key="activeDate"></router-view> this.activeDate = new Date()
2.給 router-view 標簽添加 v-if
通過 $nextTick() ，協(xié)助實現(xiàn)。先把 <router-view /> 移除，移除后再重新添加，達到刷新當前頁面的功能。
<router-link :to="url" @click.native="refresh">頁面1</router-link>
<router-view v-if="flag"/>
<script>
export default {
data () {
return {
flag: true
}
},
methods: {
refresh() {
this.flag= false // 通過v-if移除router-view節(jié)點
this.$nextTick(() => {
this.flag= true // DOM更新后再通過v-if添加router-view節(jié)點
})
}
}
}
</script>
3.新建空白頁,也是種不錯的方案
refresh.vue //新建頁面
<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
demo.vue //然后在需要的頁面調用
this.$router.replace({
path: '/refresh',
query: {
t: Date.now()
}
})
4.query傳值 watch監(jiān)聽頁面$route變化然后更新
5.provide / inject 組合
6.取巧的辦法 <router-view ref="chartView"></router-view>
定義ref,然后調用相對應的方法，最好給每個頁面都提供相同的方法
this.$refs.chartView.refresh()
就解決了點擊當前路由沒有刷新的問題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue項目全局配置頁面緩存之按需讀取緩存的實現(xiàn)詳解
這篇文章主要給大家介紹了關于Vue項目全局配置頁面緩存之實現(xiàn)按需讀取緩存的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧2018-08-08
這篇文章主要介紹了vue-resize深度解讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
下面小編就為大家?guī)硪黄獀ue-ajax小封裝實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue2.0 實現(xiàn)歌手列表滾動及右側快速入口功能
這篇文章主要介紹了Vue2.0實現(xiàn)歌手列表滾動及右側快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
今天小編就為大家分享一篇vue 的點擊事件獲取當前點擊的元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3通過ref操作Dom元素及hooks的使用方法,需要的朋友可以參考下2023-01-01
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關于vue2.x中$attrs和$listeners的相關資料,需要的朋友可以參考下2022-03-03
在項目需求中我們會遇到國際化的中英文切換,這篇文章主要給大家介紹了關于前端VUE雙語實現(xiàn)方案的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
在Vue.js中,ref屬性是組件的重要組成部分,它決定了組件如何獲取DOM元素,本文將探討ref屬性的使用方法和優(yōu)勢,并通過有趣的示例展示其強大的功能,需要的朋友可以參考下2025-03-03