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單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址
這篇文章主要介紹了vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue渲染時(shí)閃爍{{}}的問(wèn)題及解決方法
v-if和v-show可能是日常開(kāi)發(fā)中最常用的兩個(gè)指令，雖然看上去兩者功能是類(lèi)似的，但是兩者還是存在很大區(qū)別的。接下來(lái)通過(guò)本文給大家分享vue渲染時(shí)閃爍{{}}的問(wèn)題及解決方法，感興趣的朋友一起看看吧2018-03-03
Vue實(shí)現(xiàn)用戶(hù)自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶(hù)自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue3使用別名報(bào)錯(cuò)問(wèn)題的解決辦法(vetur插件報(bào)錯(cuò)問(wèn)題)
最近在寫(xiě)一個(gè)購(gòu)物網(wǎng)站使用vue,使用中遇到了問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3使用別名報(bào)錯(cuò)問(wèn)題的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)（頁(yè)面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)（頁(yè)面下鉆）功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07