Vue同一路由強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)過(guò)程

更新時(shí)間：2022年08月15日 11:26:59 作者：Scoful

這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁(yè)面的問(wèn)題，本文給大家分享實(shí)現(xiàn)過(guò)程，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 思路

使用this.$router.replace()，跳到一個(gè)空白頁(yè)，然后this.$router.replace()重新跳回來(lái)
使用this.$router.replace()的原因是，其實(shí)跟this.$router.push()效果一樣，但是this.$router.replace()不會(huì)記錄到history里，不留痕跡
甚至不用打開(kāi)空白頁(yè)，直接用beforeRouteEnter攔截跳回原來(lái)頁(yè)面

2. 實(shí)現(xiàn)過(guò)程

2.1 新建一個(gè)名為refresh.vue的文件

2.2 在refresh.vue里添加 beforeRouteEnter

<template> </template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
      // 跳到該路由頁(yè)面后，再替換為from.path來(lái)源路徑
    })
  }
}
</script>

2.3 在路由文件里，加上refresh 的路由

    {
      path: '/refresh',
      component: resolve => require(['@/pages/refresh'], resolve),
      meta: {
        title: '用于同路由刷新'
      }
    }

2.4 當(dāng)你想刷新當(dāng)前頁(yè)面的時(shí)候，可以調(diào)用下面這段代碼

this.$router.replace('/refresh')

over，enjoy！

到此這篇關(guān)于VUE同一路由強(qiáng)制刷新頁(yè)面的文章就介紹到這了,更多相關(guān)vue路由強(qiáng)制刷新頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用
這篇文章主要介紹了vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開(kāi)發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見(jiàn)的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下
2023-10-10
Yarn與Lerna管理monorepo使用詳解
這篇文章主要為大家介紹了Yarn與Lerna管理monorepo的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
如何寫(xiě)一個(gè) Vue3 的自定義指令
這篇文章主要介紹了如何寫(xiě)一個(gè) Vue3 的自定義指令，如果我們想在 Vue.js 的項(xiàng)目中實(shí)現(xiàn)圖片懶加載，那么用自定義指令就再合適不過(guò)了，那么接下來(lái)就讓我手把手帶你用 Vue3 去實(shí)現(xiàn)一個(gè)圖片懶加載的自定義指令 v-lazy,需要的朋友可以參考一下
2022-01-01
詳解keep-alive + vuex 讓緩存的頁(yè)面靈活起來(lái)
這篇文章主要介紹了keep-alive + vuex 讓緩存的頁(yè)面靈活起來(lái)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10