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