Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
前言
開發(fā)項(xiàng)目的時(shí)候突然接到了這個(gè)需求，實(shí)驗(yàn)過后，解決方法也蠻多種，下面就講下常規(guī)的幾種方案
1.改變r(jià)outer-view中的key值
通過改變 router-view 中的 key 值，來達(dá)到刷新組件的目的
<router-view :key="activeDate"></router-view> this.activeDate = new Date()
2.給 router-view 標(biāo)簽添加 v-if
通過 $nextTick() ，協(xié)助實(shí)現(xiàn)。先把 <router-view /> 移除，移除后再重新添加，達(dá)到刷新當(dāng)前頁面的功能。
<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é)點(diǎn)
this.$nextTick(() => {
this.flag= true // DOM更新后再通過v-if添加router-view節(jié)點(diǎn)
})
}
}
}
</script>
3.新建空白頁,也是種不錯(cuò)的方案
refresh.vue //新建頁面
<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
demo.vue //然后在需要的頁面調(diào)用
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,然后調(diào)用相對(duì)應(yīng)的方法，最好給每個(gè)頁面都提供相同的方法
this.$refs.chartView.refresh()
就解決了點(diǎn)擊當(dāng)前路由沒有刷新的問題
以上就是本文的全部內(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ì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址
這篇文章主要介紹了vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
v-if和v-show可能是日常開發(fā)中最常用的兩個(gè)指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時(shí)閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03
Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3使用別名報(bào)錯(cuò)問題的解決辦法(vetur插件報(bào)錯(cuò)問題)
最近在寫一個(gè)購物網(wǎng)站使用vue,使用中遇到了問題,下面這篇文章主要給大家介紹了關(guān)于vue3使用別名報(bào)錯(cuò)問題的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了vue中的scope使用詳解,需要的朋友可以參考下2017-10-10
Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級(jí)跳轉(zhuǎn)（頁面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級(jí)跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07